/*
 * Virtina child: shared buttons.
 * Shared component, no page prefix. Use the --primary modifier for the main call to action.
 */

:root {
	--vch-button-height: 46px;
	--vch-button-primary-bg: #000;
	--vch-button-primary-fill: #00f0d8;
	--vch-button-primary-text: #fff;
	--vch-button-primary-text-hover: #000;
	--vch-button-secondary-arrow-bg: #000;
	--vch-button-secondary-arrow-fill: #fff;
	--vch-button-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vch-button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: 183px;
	height: var(--vch-button-height);
	box-sizing: border-box;
	padding: 0 4px 0 21px;
	border: 0;
	border-radius: 48px;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.48px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.6s var(--vch-button-ease), background-color 0.6s var(--vch-button-ease);
}

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

/* Primary: the main call to action. Same size as the secondary button; the border is transparent
   so the outline and the solid fill take up the same space. */
.vch-button--primary {
	min-width: 184px;
	height: 54px;
	padding: 0 4px 0 32px;
	border: 1px solid transparent;
	background: var(--vch-button-primary-bg);
	color: var(--vch-button-primary-text);
}

/* Secondary: an outlined pill. The flair fills it on hover, as on the primary. */
.vch-button--secondary {
	min-width: 184px;
	height: 54px;
	padding: 0 4px 0 32px;
	border: 1px solid var(--vch-color-text);
	background: transparent;
	color: var(--vch-color-text);
	font-weight: 400;
}

.vch-button--secondary:focus-visible {
	outline: 3px solid var(--vch-color-text);
	outline-offset: 3px;
}

/* Flair: a circle that grows from the point where the pointer enters.
   JS sets --vch-flair-x and --vch-flair-y to that point. */
.vch-button__flair {
	position: absolute;
	left: var(--vch-flair-x, 50%);
	top: var(--vch-flair-y, 50%);
	z-index: 0;
	/* JS sets --vch-flair-size so the circle reaches the farthest corner from the entry point. */
	width: var(--vch-flair-size, 420px);
	height: var(--vch-flair-size, 420px);
	border-radius: 50%;
	background: var(--vch-button-primary-fill);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 0.6s var(--vch-button-ease);
	pointer-events: none;
}

.vch-button--primary:hover .vch-button__flair,
.vch-button--primary:focus-visible .vch-button__flair,
.vch-button--secondary:hover .vch-button__flair,
.vch-button--secondary:focus-visible .vch-button__flair {
	transform: translate(-50%, -50%) scale(1);
}

/* Label and arrow sit above the flair. */
.vch-button__label,
.vch-button__arrow {
	position: relative;
	z-index: 1;
}

/*
 * Arrow circle for the primary and secondary buttons: two arrows, one slides out and the other
 * slides in on hover. --vch-arrow-size is the circle, --vch-arrow-glyph the arrow inside it. The
 * slide distance equals the circle size.
 */
.vch-button__arrow {
	--vch-arrow-size: 46px;
	--vch-arrow-glyph: 38px;
	display: block;
	flex-shrink: 0;
	width: var(--vch-arrow-size);
	height: var(--vch-arrow-size);
	overflow: hidden;
	border-radius: 50%;
	background: var(--vch-color-surface);
}


.vch-button__arrow::before,
.vch-button__arrow::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--vch-arrow-glyph);
	height: var(--vch-arrow-glyph);
	background: var(--vch-color-text);
	-webkit-mask: url('../images/vch-button-arrow.svg') center / contain no-repeat;
	mask: url('../images/vch-button-arrow.svg') center / contain no-repeat;
	transition: transform 0.45s var(--vch-button-ease);
}

.vch-button__arrow::after {
	transform: translate(-50%, -50%);
}

.vch-button__arrow::before {
	transform: translate(calc(-50% - var(--vch-arrow-size)), -50%);
}

/* Secondary button: black arrow circle with white arrows. */
.vch-button--secondary .vch-button__arrow {
	background: var(--vch-button-secondary-arrow-bg);
}

.vch-button--secondary .vch-button__arrow::before,
.vch-button--secondary .vch-button__arrow::after {
	background: var(--vch-button-secondary-arrow-fill);
}

.vch-button--secondary:hover .vch-button__arrow::after,
.vch-button--secondary:focus-visible .vch-button__arrow::after {
	transform: translate(calc(-50% + var(--vch-arrow-size)), -50%);
}

.vch-button--secondary:hover .vch-button__arrow::before,
.vch-button--secondary:focus-visible .vch-button__arrow::before {
	transform: translate(-50%, -50%);
}

/* Dark label on the bright fill keeps the text readable. The black base fades out on hover,
   so the flair's anti-aliased edge blends with the page instead of showing black. */
.vch-button--primary:hover,
.vch-button--primary:focus-visible {
	color: var(--vch-button-primary-text-hover);
	background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.vch-button,
	.vch-button__flair,
	.vch-button__arrow::before,
	.vch-button__arrow::after {
		transition: none;
	}
}