/*
 * Buttons.
 *
 * The hero's call to action is a quiet stone pill with green text, not a green slab. That is the
 * mockup's register and it is what keeps the page calm: the survey is one screen down and the page
 * has nothing to compete with, so the button does not need to shout. The green fill is kept for
 * where a choice actually has to be committed, which is inside the form.
 *
 * Measured: 387 x 71 pill, label at 23px.
 */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: var(--tap-min);
	padding: var(--space-2) var(--space-5);
	border: var(--border-hairline) solid transparent; /* declared so hover cannot shift layout */
	border-radius: var(--radius-pill);
	font-size: var(--font-6);
	font-weight: var(--weight-medium);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--duration) var(--ease),
		border-color var(--duration) var(--ease),
		color var(--duration) var(--ease),
		transform var(--duration) var(--ease);
}

.btn__icon {
	flex: none;
	width: var(--icon-sm);
	height: var(--icon-sm);
	transition: transform var(--duration) var(--ease);
}

/* -- Quiet, the hero's call to action ----------------------------------- */

.btn--quiet {
	background-color: var(--bnk-stone);
	border-color: var(--bnk-stone);
	color: var(--color-accent);      /* 5.95 on stone */
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
	background-color: var(--bnk-highlight);
	border-color: var(--bnk-highlight);
	color: var(--color-accent-dark); /* 5.13 on the marker sage */
}

/* -- Solid, for committing inside the form ------------------------------ */

.btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-on-accent);
	font-size: var(--font-5);
	padding-inline: var(--space-5);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-on-accent);
}

.btn--primary:hover .btn__icon,
.btn--primary:focus-visible .btn__icon {
	transform: translateX(3px);
}

/* -- Outline, for the two share actions --------------------------------- */

.btn--soft {
	background-color: transparent;
	border-color: var(--color-border-control);
	color: var(--color-text);
	font-size: var(--font-3);
	padding-inline: var(--space-3);
}

.btn--soft:hover,
.btn--soft:focus-visible {
	background-color: rgb(var(--bnk-green-rgb) / 0.06);
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* -- The pulse ----------------------------------------------------------- */

/*
 * Rings that grow out of the hero's call to action and fade. Opt-in as a modifier, because this is
 * the one button on the page that has to be found, and a pulse on every button is just noise.
 *
 * Transform and opacity only. The first version travelled on outline-offset, which is geometrically
 * perfect (an outline sits the same distance off every edge whatever the pill's proportions) but is
 * a paint property, so three rings repainted the button on the main thread every frame for the life
 * of the page. That is what made it stutter on a phone, and it competed with every other transition
 * on the page. Transform and opacity are the two properties a compositor can animate on its own, so
 * this version costs the main thread nothing once it has started.
 *
 * The cost of that swap is that a uniform scale on a pill this wide throws the ring much further
 * sideways than vertically. So the two axes are scaled by different amounts, each worked out to put
 * the ring the same 22px off its own edge: 364x71 measured, so 408/364 across and 115/71 down. The
 * pair holds its shape as the button gets smaller, because both dimensions shrink together, and by
 * the time the caps have gone noticeably elliptical the ring has almost finished fading out.
 *
 * Two rings rather than three. The wrapper is never transformed, only its pseudo-elements, because
 * a transform on the parent would multiply into the children and the rings would travel at
 * different rates. Two is also simply calmer, which is the point: the old one read as a hard border
 * snapping on and off rather than as something leaving the button.
 */
.btn--pulse {
	position: relative;
	isolation: isolate;
}

.btn__pulse {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.btn__pulse::before,
.btn__pulse::after {
	content: '';
	position: absolute;
	inset: 0;
	border: var(--border-selected) solid var(--color-border-control);
	border-radius: var(--radius-pill);
	opacity: 0;
	transform: scale(1);
	will-change: transform, opacity;
	animation: bnk-pulse 2200ms linear infinite;
}

.btn__pulse::after {
	animation-delay: 1100ms;
}

/*
 * animation: none, not animation-play-state: paused. A paused animation still holds its own
 * computed opacity, so the ring would freeze mid-air on the button rather than clear it. Restarting
 * from 0% costs nothing to look at, because 0% is invisible.
 */
.btn--pulse:is(:hover, :focus-visible) .btn__pulse::before,
.btn--pulse:is(:hover, :focus-visible) .btn__pulse::after {
	animation: none;
}

/*
 * Starts invisible and sitting exactly on the button's edge, so nothing ever pops into view. It
 * fades up only once it has cleared the pill, which is what makes the loop seamless: there is no
 * frame where a ring appears or disappears at full strength.
 */
@keyframes bnk-pulse {
	0% {
		transform: scale(1);
		opacity: 0;
	}

	32% {
		opacity: 0.5;
	}

	100% {
		transform: scale(1.121, 1.62);
		opacity: 0;
	}
}

/*
 * base.css already collapses every duration under reduced motion, which would leave these flashing
 * once on load rather than not running. An attention device is exactly the kind of thing the
 * setting is asking for none of.
 */
@media (prefers-reduced-motion: reduce) {
	.btn__pulse {
		display: none;
	}
}

/* -- Sizes -------------------------------------------------------------- */

.btn--lg {
	min-height: 4.4375rem;   /* 71px, the mockup's pill */
}

.btn--block {
	display: flex;
	width: 100%;
}

/* -- Disabled ----------------------------------------------------------- */

.btn[aria-disabled='true'],
.btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.btn[aria-disabled='true']:hover,
.btn:disabled:hover {
	transform: none;
}

/* -- The quiet text action ---------------------------------------------- */

.link-action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-05);
	min-height: var(--tap-min);
	padding: 0;
	color: var(--color-link);
	font-size: var(--font-3);
	font-weight: var(--weight-medium);
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}

.link-action:hover,
.link-action:focus-visible {
	color: var(--color-link-hover);
}

.link-action:hover .link-action__text,
.link-action:focus-visible .link-action__text {
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.link-action__icon {
	flex: none;
	width: var(--icon-sm);
	height: var(--icon-sm);
	transition: transform var(--duration) var(--ease);
}

.link-action--back:hover .link-action__icon,
.link-action--back:focus-visible .link-action__icon {
	transform: translateX(-3px);
}