/*!
 * @be-partner-labs/ds v1.8.0 — components/tabs
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/tabs.min.css">
 * npm:  @import "@be-partner-labs/ds/components/tabs";
 * Docs: https://ds.bepartnerlabs.com/components/tabs/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-tabs
	 * Accessible tabs — JS drives aria-selected, CSS drives all visuals.
	 * Public API:
	 *   --tabs-accent    Active tab underline / left-border color
	 *   --tabs-border    Tab list bottom border
	 *   --tabs-gap       Space between tab buttons
	 */
	.bp-tabs {
		--_accent: var(--tabs-accent, var(--bp-primary));
		--_border: var(--tabs-border, 1px solid var(--bp-color-border));
		--_gap: var(--tabs-gap, var(--bp-space-2));

		container-type: inline-size;
		display: flex;
		flex-direction: column;
	}

	.bp-tabs__list {
		display: flex;
		flex-direction: row;
		gap: var(--_gap);
		border-bottom: var(--_border);
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.bp-tabs__tab {
		position: relative;
		appearance: none;
		background: none;
		border: none;
		border-bottom: 2px solid transparent;
		margin-bottom: -1px;
		padding: var(--bp-space-3) var(--bp-space-4);
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text-muted);
		cursor: pointer;
		white-space: nowrap;
		transition:
			color var(--bp-duration-fast) var(--bp-ease),
			border-color var(--bp-duration-fast) var(--bp-ease);
	}

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

	.bp-tabs__tab:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
		border-radius: var(--bp-radius-sm);
	}

	.bp-tabs__tab[aria-selected='true'] {
		color: var(--_accent);
		border-bottom-color: var(--_accent);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-tabs__panel {
		padding: var(--bp-space-5) 0;
		color: var(--bp-color-text);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-loose);
	}

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

	@container (inline-size < 480px) {
		.bp-tabs__list {
			flex-direction: column;
			border-bottom: none;
			border-inline-start: var(--_border);
			gap: 0;
		}

		.bp-tabs__tab {
			border-bottom: none;
			border-inline-start: 3px solid transparent;
			margin-bottom: 0;
			margin-inline-start: -1px;
			text-align: start;
		}

		.bp-tabs__tab[aria-selected='true'] {
			border-inline-start-color: var(--_accent);
		}
	}

	@container (inline-size > 0) {
		.bp-tabs__tab {
			font-size: clamp(var(--bp-text-sm), 3cqi, var(--bp-text-base));
		}

		.bp-tabs__panel {
			font-size: clamp(var(--bp-text-sm), 2.5cqi, var(--bp-text-base));
		}
	}
}