/*
 * Shared pill button (.wsc-button) — the hero's CTA, extracted for reuse.
 * Registered as the `wsc-button` style handle in inc/ui-button.php; a block
 * that calls wsc_button() declares that handle in its block.json so this loads
 * only where a button appears. Tokens only; no !important.
 *
 * Ported verbatim from the hero's button rules (the two-stop gradient wipe, the
 * 3px icon nudge) so the hero renders identically after the extraction. The
 * hero-layout-only `align-self` is dropped: the consuming context positions the
 * button, and .wsc-hero__inner already aligns its children to the start.
 *
 * The wipe: one background image taller than the button — bottom half one
 * colour, top half the other — animated by shifting background-position, so the
 * incoming colour has a single antialiased edge instead of two disagreeing ones
 * (see the hero's original note for why a second painted layer seams).
 *
 * On why the image is 200% + 5px and not the obvious 200%: see background-size
 * below.
 */

.wsc-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--30); /* 16px */
	padding-block: var(--wp--preset--spacing--30); /* 16px */
	padding-inline: var(--wp--preset--spacing--40); /* 24px */
	border-radius: var(--wp--custom--radius--pill);
	background-image: linear-gradient(
		to top,
		var(--wp--preset--color--ink) 50%,
		var(--wp--preset--color--primary) 50%
	);
	/*
	 * 200% PLUS 5px — the 5px is what stops the outgoing colour surviving as a
	 * hairline along one edge.
	 *
	 * At exactly 200% the gradient's hard stop sits on the image's midpoint, which
	 * is precisely where a travel endpoint puts the visible window's edge: at
	 * `0 0` the window ends on the stop, at `0 100%` it begins on it. The stop is
	 * antialiased across a fractional row — and this button's height IS fractional
	 * (13px label x 1.25 line-height = 16.25, + 32 padding = 48.25px) — so that
	 * blended row lands inside the button and paints a 1px line of the colour
	 * being wiped away. Whether it shows then depends on the device pixel ratio
	 * and the box's subpixel offset, which is why it comes and goes.
	 *
	 * The extra 5px puts the stop 2.5px clear of BOTH endpoints (half the
	 * slack falls on each side), so each end of the travel shows one flat colour.
	 * Deliberately absolute rather than a percentage: a percentage's clearance
	 * scales with the button, and on a short one it would shrink back under the
	 * one device pixel the blend can occupy. The wipe travels 5px further than
	 * the button's height; nothing about it reads differently.
	 */
	background-size: 100% calc(200% + 5px);
	background-position: 0 0; /* green half showing */
	color: var(--wp--preset--color--bg);
	text-decoration: none;
	transition: background-position 0.4s var(--wsc-ease, cubic-bezier(0.645, 0.045, 0.355, 1));
}

.wsc-button:hover,
.wsc-button:focus-visible {
	background-position: 0 100%; /* ink wipes up over the green */
}

.wsc-button__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: 0; /* The Mono token is 0; the inherited body default is -1%. */
	line-height: 1.25; /* Figma says "normal" — the theme's standing value for it */
	text-transform: uppercase;
}

/* 14px is the icon's frame in the design, not the 16 of its viewBox. */
.wsc-button__icon {
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 0.3s var(--wsc-ease, cubic-bezier(0.645, 0.045, 0.355, 1));
}

/* The 3px nudge from the reference button. */
.wsc-button:hover .wsc-button__icon,
.wsc-button:focus-visible .wsc-button__icon {
	transform: translateX(3px);
}

/*
 * Small variant — the shorter pill the site chrome needs, where a 48px button
 * would push the header bar taller than the design's island. Only the block
 * padding changes: the horizontal padding differs per placement (16 in the
 * header row, 24 in the dropdown promo and the mobile panel) and is handled by
 * the caller's own class rather than baked into a size.
 */
.wsc-button--sm {
	padding-block: var(--wp--preset--spacing--20); /* 12px */
}

/*
 * Invert variant — a dark pill at rest, wiping toward green on hover. The mirror
 * of the default: the two gradient stops swap so the resting (top) half is ink
 * and the hover (bottom) half is green. Readable as a dark pill on the green
 * CTA surface; the label keeps the white it inherits from .wsc-button.
 */
.wsc-button--invert {
	background-image: linear-gradient(
		to top,
		var(--wp--preset--color--primary) 50%,
		var(--wp--preset--color--ink) 50%
	);
	background-position: 0 0; /* ink half showing — the dark pill */
}

.wsc-button--invert:hover,
.wsc-button--invert:focus-visible {
	background-position: 0 100%; /* green wipes up over the ink */
}

/*
 * Outline variant — a bordered pill with no fill at rest, flooding to solid ink
 * on hover. Same mechanism as the two variants above: only the gradient's two
 * stops change, so the wipe geometry is inherited rather than restated —
 * including the `calc(200% + 5px)` background-size that keeps the antialiased
 * stop outside the visible window at both ends of the travel.
 *
 * `transparent` as the resting stop is safe for the same reason the hero scrim
 * uses it: CSS interpolates gradients with premultiplied alpha, so it behaves as
 * a zero-alpha copy of the ink beside it rather than fading through grey.
 *
 * THE LABEL COLOUR HAS TO TRAVEL WITH THE FILL, which is the one thing this
 * variant adds beyond the stops. At rest the label sits on whatever is behind
 * the button, so it must be ink to be readable; once ink floods in it must flip
 * to bg. The other two variants keep white throughout because both of their
 * stops are dark.
 *
 * 1.5px, not 1px — the design draws this stroke at 1.5 (node 16424:8249). The
 * card around it in that same frame uses a 1px `border` token. Two different
 * strokes on purpose; do not round them together.
 *
 * No reduced-motion rule needed: the block below matches `.wsc-button`, which
 * every outline button also carries, and it is later in the file.
 */
.wsc-button--outline {
	border: 1.5px solid var(--wp--preset--color--ink);
	background-image: linear-gradient(
		to top,
		var(--wp--preset--color--ink) 50%,
		transparent 50%
	);
	background-position: 0 0; /* transparent half showing — the bare pill */
	color: var(--wp--preset--color--ink);
	transition:
		background-position 0.4s var(--wsc-ease, cubic-bezier(0.645, 0.045, 0.355, 1)),
		color 0.4s var(--wsc-ease, cubic-bezier(0.645, 0.045, 0.355, 1));
}

.wsc-button--outline:hover,
.wsc-button--outline:focus-visible {
	background-position: 0 100%; /* ink floods up over the bare pill */
	color: var(--wp--preset--color--bg);
}

@media (prefers-reduced-motion: reduce) {
	.wsc-button,
	.wsc-button__icon {
		transition: none;
	}
}