/*
 * rooster/tabs (BRIEF-2026-11-03-PRODUCT-PAGES-PROMO.md, package T): the whole look, complete on its own sheet (the
 * owner's rule that every block styles itself), on the theme's tokens with fallbacks; the panels (rooster/tab) are
 * drawn here too. The tabs are the area bar's pills (rooster/mark nav): wrapped 8 px apart, each 44 px tall at the
 * least, 8 px over and 16 px aside, fully rounded, the 18 px icon 8 px before the 15 px semibold words. The selected tab
 * is filled with its tone (the accent: the tab's own family or semantic tone, else the block's, else the page's), its
 * words black or white from the fill's luminance (4.5:1 on any accent of either scheme, as the section's pill heading);
 * the others in their tone's tint (the accent at 14 % over the surface), their words and icon the tone's text shade,
 * floored at OKLCH 0.45 in the light scheme (the library's rule for a tone's words on its own tint), filling under the
 * pointer and in focus; the focus ring the nav pill's, 2 px in the contrast ink 2 px out. The panel sits 32 px under the
 * tabs (24 on a phone); a panel hidden until found keeps its box at no height (the browser's content-visibility), so
 * the gap is the tab list's, not the panels'. A semantic tone maps the accent presets here, as the section sheet does.
 * Compiled by build/blocks-css.mjs.
 */

@import "../theme.css";

.rooster-tabs {
	box-sizing: border-box;
	margin: 0;
}

.rooster-tabs .rooster-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
	padding: 0;
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: normal;
	word-break: normal;
}

@media (max-width: 48rem) {
	.rooster-tabs .rooster-tabs__list {
		margin-bottom: 24px;
	}
}

/* A semantic tone (the block's, or a tab's): the accent presets mapped to the palette's colour and its text shade. */
:is(.rooster-tabs, .rooster-tabs__tab).is-tone-success {
	--wp--preset--color--accent: var(--wp--preset--color--success, light-dark(#15803d, #4ade80));
	--wp--preset--color--accent-text: light-dark(oklch(from var(--wp--preset--color--success, #15803d) min(l, 0.5) c h), oklch(from var(--wp--preset--color--success, #4ade80) max(l, 0.78) c h));
}

/* The warning's text shade is its ink (the palette's warning-ink, theme 1.3.8: 4.5:1 on the page and on subtle). */
:is(.rooster-tabs, .rooster-tabs__tab).is-tone-warning {
	--wp--preset--color--accent: var(--wp--preset--color--warning, light-dark(#b45309, #fbbf24));
	--wp--preset--color--accent-text: var(--wp--preset--color--warning-ink, light-dark(#896610, #fbbf24));
}

:is(.rooster-tabs, .rooster-tabs__tab).is-tone-danger {
	--wp--preset--color--accent: var(--wp--preset--color--danger, light-dark(#b91c1c, #f87171));
	--wp--preset--color--accent-text: light-dark(oklch(from var(--wp--preset--color--danger, #b91c1c) min(l, 0.5) c h), oklch(from var(--wp--preset--color--danger, #f87171) max(l, 0.78) c h));
}

:is(.rooster-tabs, .rooster-tabs__tab).is-tone-neutral {
	--wp--preset--color--accent: var(--wp--preset--color--muted, light-dark(#525252, #a3a3a3));
	--wp--preset--color--accent-text: light-dark(oklch(from var(--wp--preset--color--muted, #525252) min(l, 0.5) c h), oklch(from var(--wp--preset--color--muted, #a3a3a3) max(l, 0.78) c h));
}

.rooster-tabs .rooster-tabs__tab {
	--rooster-tabs-fill: var(--wp--preset--color--accent, light-dark(#334155, #cbd5e1));
	--rooster-tabs-ink: var(--wp--preset--color--accent-text, light-dark(#334155, #cbd5e1));
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--rooster-tabs-fill) 14%, transparent);
	color: light-dark(oklch(from var(--rooster-tabs-ink) min(l, 0.45) c h), var(--rooster-tabs-ink));
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/*
 * Selected, under the pointer and in focus: filled with the tone, the words black or white from that fill (the selected
 * tab a little darker under the pointer and in focus, its words from the darker fill: the LMS green's black words read
 * 4.15 on it otherwise).
 */
.rooster-tabs .rooster-tabs__tab:is([aria-selected="true"], :hover, :focus-visible) {
	--rooster-tabs-solid: var(--rooster-tabs-fill);
	background: var(--rooster-tabs-solid);
	color: color(from var(--rooster-tabs-solid) xyz-d65 calc(clamp(0, (0.1791 - y) * 1000, 1) * 0.9505) calc(clamp(0, (0.1791 - y) * 1000, 1)) calc(clamp(0, (0.1791 - y) * 1000, 1) * 1.089));
	text-decoration: none;
}

.rooster-tabs .rooster-tabs__tab[aria-selected="true"]:is(:hover, :focus-visible) {
	--rooster-tabs-solid: color-mix(in srgb, var(--rooster-tabs-fill) 88%, #000000);
}

.rooster-tabs .rooster-tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
	outline-offset: 2px;
	box-shadow: none;
}

.rooster-tabs .rooster-tabs__icon {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
}

.rooster-tabs .rooster-tabs__panel {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* An anchor stub (a hidden panel's deferred section's id in the first HTML): no box, nothing to see. */
.rooster-tabs .rooster-tabs__anchor {
	display: block;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.rooster-tabs .rooster-tabs__panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast, light-dark(#020618, #ffffff));
	outline-offset: 4px;
	box-shadow: none;
}

/* Forced colours drop the fills: the selected tab keeps a mark of its own. */
@media (forced-colors: active) {
	.rooster-tabs .rooster-tabs__tab {
		border: 1px solid CanvasText;
	}

	.rooster-tabs .rooster-tabs__tab[aria-selected="true"] {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}