/*
 * Shared pill switcher (.wsc-switcher) — the features slider's segmented
 * control, extracted for reuse.
 *
 * Registered as the `wsc-switcher` style handle in inc/ui-switcher.php; a block
 * that calls wsc_switcher() declares that handle in its block.json so this loads
 * only where a switcher appears. Tokens only; no !important.
 *
 * Ported verbatim from the features slider's switcher rules, so that block
 * renders identically after the extraction. Two things changed on the way, both
 * deliberate:
 *
 * 1. Every colour became a custom property declared on .wsc-switcher and
 *    consumed below. A block in a dark band re-points them from its own
 *    stylesheet — `.wsc-my-block .wsc-switcher { --wsc-switcher-track: … }` —
 *    which is the whole theming seam. This file never learns about a specific
 *    consumer, and a new context needs no edit here.
 *
 * 2. Selection is styled off .wsc-switcher__option--active and never off
 *    [aria-selected] / [aria-checked]. The component serves both a tablist and a
 *    radiogroup, and those two spell selection differently; keying off the class
 *    the controller also maintains means one rule rather than a duplicated pair.
 */

.wsc-switcher {
	/*
	 * The hairline is the one value in the design with no preset behind it, so
	 * it stays a literal here rather than becoming an invented palette entry.
	 */
	--wsc-switcher-border: rgba(9, 55, 61, 0.24);
	--wsc-switcher-track: var(--wp--preset--color--bg);
	--wsc-switcher-label: var(--wp--preset--color--ink-soft);
	--wsc-switcher-hover: var(--wp--preset--color--surface);
	--wsc-switcher-pill: var(--wp--preset--color--ink);
	--wsc-switcher-label-active: var(--wp--preset--color--bg);

	/*
	 * position: relative because the sliding indicator is absolutely positioned
	 * against it, and because the controller measures each option's offsetLeft
	 * against it. The 4px padding is the frame's; it has no preset, so it is
	 * written as a literal rem with this note rather than rounded to the nearest
	 * token.
	 */
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10); /* 8px */
	padding: 0.25rem; /* 4px — no preset at this size */
	border: 1px solid var(--wsc-switcher-border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wsc-switcher-track);
	backdrop-filter: blur(4px);
}

.wsc-switcher__option {
	position: relative;
	z-index: 1; /* above the indicator */
	padding-block: var(--wp--preset--spacing--10); /* 8px */
	padding-inline: var(--wp--preset--spacing--40); /* 24px */
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: transparent;
	color: var(--wsc-switcher-label);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono); /* 13px */
	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;
	cursor: pointer;
	transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
		background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Inactive options only — a hover tint on the active pill would fight the
   indicator sliding out from under it. */
.wsc-switcher__option:hover:not(.wsc-switcher__option--active),
.wsc-switcher__option:focus-visible:not(.wsc-switcher__option--active) {
	background-color: var(--wsc-switcher-hover);
}

/*
 * The no-JS/editor fallback: the active option paints its own fill. The
 * controller adds .is-ready to the host once it can measure, and from then on
 * the indicator carries the fill instead — so there is never a moment with no
 * active pill and never two of them.
 */
.wsc-switcher__option--active {
	background-color: var(--wsc-switcher-pill);
	color: var(--wsc-switcher-label-active);
}

.wsc-switcher.is-ready .wsc-switcher__option--active {
	background-color: transparent;
}

/*
 * The sliding pill. Position and width are written by the controller from the
 * active option's own box, because translated labels are not the same width.
 *
 * width + translate rather than scaleX: this is a pill, and scaling it
 * horizontally would stretch the rounded caps into ellipses.
 *
 * Hidden until .is-ready so it cannot flash at x=0 before the first measurement.
 */
.wsc-switcher__indicator {
	position: absolute;
	inset-block: 0.25rem; /* matches the switcher's own padding */
	left: 0;
	z-index: 0;
	width: var(--wsc-switcher-w, 0);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wsc-switcher-pill);
	opacity: 0;
	transform: translateX(var(--wsc-switcher-x, 0));
}

.wsc-switcher.is-ready .wsc-switcher__indicator {
	opacity: 1;
	transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
		width 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.wsc-switcher__option,
	.wsc-switcher__indicator,
	.wsc-switcher.is-ready .wsc-switcher__indicator {
		transition: none;
	}
}