Button.css

.root {
	background-color: var(--color-background-neutral);
	/* Border is aligned with background */
	color: var(--color-foreground-neutral);
	border-radius: var(--unit-radius-small);
	transition: var(--duration-fast) var(--easing-standard);
	transition-property: background-color, box-shadow, border;
	padding: calc(var(--unit-x2) - var(--unit-border-small)) calc(var(--unit-x3) - var(--unit-border-small));
	min-height: calc(var(--DO_NOT_USE_bodyMedium2_lineHeight) + var(--unit-x2) * 2);
	min-width: calc(var(--DO_NOT_USE_bodyMedium2_lineHeight) + var(--unit-x2) * 2);
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
	text-align: left;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: var(--unit-border-small) solid transparent;
	@apply --font-body-medium2;

	&:hover,
	&.--selected {
		background-color: var(--color-background-highlighted-neutral);
	}

	&:active {
		transform: translateY(1px);
	}

	&.--disabled {
		background: var(--color-background-disabled);
		color: var(--color-foreground-disabled);

		&:active {
			transform: none;
		}
	}

	&.--variant-transparent {
		background-color: transparent;
		padding-left: calc(var(--unit-x2) - var(--unit-border-small));
		padding-right: calc(var(--unit-x2) - var(--unit-border-small));

		&:before {
			content: '';
			position: absolute;
			top: calc(var(--unit-border-small) * -1);
			bottom: calc(var(--unit-border-small) * -1);
			right: calc(var(--unit-border-small) * -1);
			left: calc(var(--unit-border-small) * -1);
			border-radius: var(--unit-radius-small);
			opacity: 0;
			transition: opacity var(--duration-fast) var(--easing-standard);
		}

		&:hover,
		&.--selected {
			&:before {
				background-color: currentColor;
				opacity: 0.08;
			}
		}

		&.--disabled {
			color: var(--color-foreground-disabled);
			background-color: transparent;
		}
	}

	&.--variant-outline {
		background-color: var(--color-background-base);
		border-color: var(--color-border-neutral-faded);

		&:hover,
		&.--selected {
			border-color: var(--color-border-neutral);
		}

		&.--disabled {
			background-color: var(--color-background-disabled);
			border-color: var(--color-border-disabled);
		}
	}
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
	align-items: center;
	justify-content: center;
}

.icon {
	margin-right: var(--unit-x2);

	&:last-child {
		margin-right: 0;
	}
}

.root.--icon-position-end {
	& .icon {
		margin-right: 0;
		margin-left: var(--unit-x2);

		&:first-child {
			margin-left: 0;
		}
	}
}

.root.--loading {
	cursor: default;

	&:active {
		transform: none;
	}

	& .text,
	& .icon {
		visibility: hidden;
	}

	& .loader {
		display: flex;
	}
}

.root.--color-primary {
	background-color: var(--color-background-primary);
	color: var(--color-on-background-primary);

	&:hover,
	&.--selected {
		background-color: var(--color-background-highlighted-primary);
	}

	&.--disabled {
		background: var(--color-background-disabled);
		color: var(--color-foreground-disabled);
	}

	&.--variant-transparent {
		background-color: transparent;
		color: var(--color-foreground-primary);

		&:hover,
		&.--selected {
			background-color: transparent;
		}

		&.--disabled {
			background: transparent;
			color: var(--color-foreground-disabled);
		}
	}

	&.--variant-outline {
		border-color: var(--color-border-neutral-faded);
		background-color: var(--color-background-base);
		color: var(--color-foreground-primary);

		&:hover,
		&.--selected {
			border-color: var(--color-border-neutral);
		}

		&.--disabled {
			border-color: var(--color-border-disabled);
			background: var(--color-background-disabled);
			color: var(--color-foreground-disabled);
		}
	}
}

.root.--color-critical {
	background-color: var(--color-background-critical);
	color: var(--color-on-background-critical);

	&:hover,
	&.--selected {
		background-color: var(--color-background-highlighted-critical);
	}

	&.--disabled {
		background: var(--color-background-disabled);
		color: var(--color-foreground-disabled);
	}

	&.--variant-transparent {
		background-color: transparent;
		color: var(--color-foreground-critical);

		&:hover,
		&.--selected {
			background-color: transparent;
		}

		&.--disabled {
			background: transparent;
			color: var(--color-foreground-disabled);
		}
	}

	&.--variant-outline {
		border-color: var(--color-border-neutral-faded);
		background-color: var(--color-background-base);
		color: var(--color-foreground-critical);

		&:hover,
		&.--selected {
			border-color: var(--color-border-neutral);
		}

		&.--disabled {
			border-color: var(--color-border-disabled);
			background: var(--color-background-disabled);
			color: var(--color-foreground-disabled);
		}
	}
}

.root.--color-inherit {
	&.--variant-transparent {
		background-color: transparent;
		color: currentColor;

		&:hover,
		&.--selected {
			background-color: transparent;

			&:before {
				opacity: 0.2;
			}
		}

		&.--disabled {
			background: transparent;
			color: var(--color-foreground-disabled);
		}
	}
}

.root.--rounded {
	border-radius: 999px;

	&:before {
		border-radius: 999px;
	}
}

.root.--icon-only {
	& .icon {
		margin: 0 calc(var(--unit-x1) * -1);
	}
}

.root.--size-large {
	padding: calc(var(--unit-x3) - var(--unit-border-small)) calc(var(--unit-x4) - var(--unit-border-small));
	min-height: calc(var(--DO_NOT_USE_bodyMedium1_lineHeight) + var(--unit-x3) * 2);
	min-width: calc(var(--DO_NOT_USE_bodyMedium1_lineHeight) + var(--unit-x3) * 2);
	@apply --font-body-medium1;

	&.--variant-transparent {
		padding-left: calc(var(--unit-x3) - var(--unit-border-small));
		padding-right: calc(var(--unit-x3) - var(--unit-border-small));
	}
}

.root.--elevated {
	box-shadow: var(--shadow-base);

	&:hover {
		box-shadow: var(--shadow-elevated);
	}

	&:active {
		box-shadow: var(--shadow-base);
	}

	&.--color-primary:hover{
		background: var(--color-background-highlighted-primary);
	}

	&.--color-critical:hover {
		background: var(--color-background-highlighted-critical);
	}

	&.--variant-outline:hover {
		border-color: var(--color-border-neutral-faded);
	}

	&.--variant-outline:active {
		background: var(--color-background-base);
	}

	&.--disabled {
		box-shadow: none;
	}

	&.--variant-transparent {
		&,
		&:hover,
		&:active {
			box-shadow: none;
		}
	}
}

.root.--full-width {
	width: 100%;
	text-align: center;
}


@media (--viewport-small) {
	.root {
		@apply --font-body-medium1;
	}
}