/**
 * Button (Figma: Button/Primary, Button/Secondary).
 *
 * On hover/focus the arrow slides out to the right while a second arrow slides in from the left.
 * Set --button-focus-ring on a parent to suit its background.
 */

.button {
	--button-focus-ring: var(--emc-color-purple-80);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 16px 24px;
	border-radius: 72px;
	font-family: var(--emc-font-family);
	font-size: 16px;
	font-weight: var(--emc-font-weight-regular);
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--emc-duration-fast) ease;
}

.button:focus-visible {
	outline: 2px solid var(--button-focus-ring);
	outline-offset: 3px;
}

.button__label {
	position: relative;
}

.button__icon {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	overflow: hidden;
	border-radius: 300px;
}

.button__arrow {
	position: absolute;
	top: 2px;
	left: 2px;
	transition: transform var(--emc-duration-base) var(--emc-ease);
}

.button__arrow--incoming {
	left: -29px;
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow {
	transform: translateX(31px);
}

/* Primary: filled pill */

.button--primary,
.button--primary:hover,
.button--primary:focus,
.button--primary:visited {
	color: var(--emc-color-purple-100);
	background-color: var(--emc-color-purple-light);
}

.button--primary:hover,
.button--primary:focus-visible {
	background-color: var(--emc-color-purple-off);
}

/* Secondary: text with an underline that draws in on hover */

.button--secondary,
.button--secondary:hover,
.button--secondary:focus,
.button--secondary:visited {
	color: var(--emc-color-white);
	background-color: transparent;
}

.button--secondary .button__label::after {
	position: absolute;
	right: 0;
	bottom: -4px;
	left: 0;
	height: 1px;
	content: "";
	background-color: currentcolor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--emc-duration-base) var(--emc-ease);
}

.button--secondary:hover .button__label::after,
.button--secondary:focus-visible .button__label::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {

	.button,
	.button__arrow,
	.button--secondary .button__label::after {
		transition: none;
	}
}