/**
 * Tabs — Geist-inspired tab list + panels.
 *
 * Adapted from https://github.com/geist-org/geist-ui/tree/master/components/tabs
 *   - underline-style indicator for active tab
 *   - keyboard navigation: ArrowLeft / ArrowRight (handled in hooks.js)
 *
 * Markup contract:
 *   <div class="st-tabs" data-st-tabs="<group>">
 *     <div class="st-tabs__list" role="tablist">
 *       <button class="st-tabs__tab" data-st-tab="<value>" aria-selected="true">…</button>
 *     </div>
 *     <div class="st-tabs__panels">
 *       <div class="st-tabs__panel" data-st-panel="<value>">…</div>
 *     </div>
 *   </div>
 */

@layer components {

	.st-tabs {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.st-tabs__list {
		display: flex;
		gap: 0;
		border-block-end: 1px solid var(--st-border);
		overflow-x: auto;
	}

	.st-tabs__tab {
		position: relative;
		padding: 0.5rem 0.875rem;
		background: transparent;
		border: 0;
		color: var(--st-text-muted);
		font-size: 0.9375rem;
		font-weight: 500;
		cursor: pointer;
		transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
		white-space: nowrap;
	}

	.st-tabs__tab:hover {
		color: var(--st-text);
	}

	.st-tabs__tab[aria-selected="true"] {
		color: var(--st-text);
	}

	.st-tabs__tab::after {
		content: "";
		position: absolute;
		inset-inline: 0.875rem;
		inset-block-end: -1px;
		block-size: 2px;
		background: var(--st-text);
		opacity: 0;
		transform: scaleX(0.6);
		transition:
			opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
			transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.st-tabs__tab[aria-selected="true"]::after {
		opacity: 1;
		transform: scaleX(1);
	}

	.st-tabs__tab:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px var(--st-focus-ring, rgb(0 102 204 / 0.35));
		border-radius: var(--st-radius);
	}

	.st-tabs__panels {
		min-block-size: 4rem;
	}

	.st-tabs__panel {
		padding-block-start: 0.25rem;
	}

	.st-tabs__panel[hidden] {
		display: none;
	}
}