/* tabs.css: Tabs (component 12). Owner: group C (P2.T6). Tokens only (L-01), logical properties only (L-04), box-shadow only var(--shadow-overlay) on overlays (L-03).
   Page tabs 44 tall and sticky under the top bar, panel tabs 36, link tabs the same bar with real links in a nav. */

[data-component="tabs"] { display: block; min-inline-size: 0; }
.tabs__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  min-inline-size: 0;
  min-block-size: var(--size-tab);
}
/* the bar hairline; the selected tab's 2 px underline overlays it */
.tabs__bar::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; border-block-end: var(--border-width) solid var(--border); pointer-events: none; }
[data-component="tabs"][data-variant="panel"] .tabs__bar { min-block-size: var(--size-control); }
[data-component="tabs"][data-variant="page"] .tabs__bar,
[data-component="tabs"][data-variant="link"] .tabs__bar { position: sticky; inset-block-start: var(--size-topbar); z-index: var(--z-sticky); background: var(--canvas); }
[data-component="tabs"][data-static="true"] .tabs__bar { position: relative; inset-block-start: auto; }

.tabs__list, .tabs__nav { display: flex; flex: 1 1 auto; min-inline-size: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.tabs__nav { overflow: visible; }
.tabs__nav > .tabs__list { inline-size: 100%; }
[data-component="tabs"][data-scroll="true"] .tabs__list { overflow-x: auto; }
.tabs__item { display: flex; flex: none; max-inline-size: none; }

.tabs__tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  block-size: var(--size-tab);
  padding-block: 0;
  padding-inline: var(--space-5);
  border: 0;
  border-block-end: var(--border-width-thick) solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: var(--type-button);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
[data-component="tabs"][data-variant="panel"] .tabs__tab { block-size: var(--size-control); }
.tabs__tab:hover, .tabs__tab[data-force="hover"] { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.tabs__tab:active, .tabs__tab[data-force="active"] { background: var(--border); color: var(--text); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--text); border-block-end-color: var(--brand); }
.tabs__tab:focus-visible, .tabs__tab[data-force="focus-visible"], .tabs__more:focus-visible { outline: var(--border-width-thick) solid var(--focus-ring); outline-offset: calc(-1 * var(--border-width-thick)); }
.tabs__tab[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; background: transparent; }
.tabs__tab[aria-disabled="true"]:hover { background: transparent; color: var(--text-disabled); }
.tabs__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--size-chip);
  block-size: var(--size-chip);
  padding-inline: var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font: var(--type-label);
  font-variant-numeric: tabular-nums lining-nums;
}

.tabs__more {
  display: inline-grid;
  place-items: center;
  flex: none;
  block-size: var(--size-tab);
  inline-size: var(--size-tab);
  padding: 0;
  border: 0;
  border-block-end: var(--border-width-thick) solid transparent;
  background: transparent;
  color: var(--text-secondary);
}
[data-component="tabs"][data-variant="panel"] .tabs__more { block-size: var(--size-control); inline-size: var(--size-control); }
.tabs__more:hover, .tabs__more[aria-expanded="true"] { background: var(--surface-hover); color: var(--text); }

.tabs__panel { padding-block-start: var(--space-5); }
.tabs__panel:focus-visible { outline-offset: calc(-1 * var(--border-width-thick)); }

/* kitchen sink: a narrow frame so the tabs overflow */
.tabs-demo__narrow { inline-size: 100%; max-inline-size: var(--size-popover-lg); }
[data-component="tabs"] { flex: 1 1 100%; }
/* Section tabs (the link variant) are a region of their own: --space-7 between them and what follows, as 02 puts between regions. Shared by every page that uses them. */
[data-component="tabs"][data-variant="link"] { margin-block-end: var(--space-7); }