/* Tabs: <div class="ui-tabs" role="tablist"> with <button class="ui-tabs__tab" role="tab"
   aria-selected="true|false">; panels use .ui-tabs__panel (role="tabpanel").
   Variants: default = underline row that scrolls horizontally when it does not fit;
   --segmented = pill segmented control (2–4 options, fills the width); --fill = equal widths.
   A segmented choice may use role="radiogroup" with role="radio" buttons: aria-checked="true" then
   marks the selected segment like aria-selected.
   Optional count inside a tab: <span class="ui-tabs__count">3</span>. */

@layer reset, tokens, base, layout, components, apps, utilities;

@layer components {
  .ui-tabs {
    display: flex;
    gap: var(--space-1);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: var(--border-width) solid var(--color-divider);
  }

  .ui-tabs::-webkit-scrollbar {
    display: none;
  }

  .ui-tabs__tab {
    --_fg: var(--color-text-muted);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    flex: none;
    min-height: var(--control-h-md);
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    color: var(--_fg);
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    transition: color var(--duration-fast) var(--ease-standard);
  }

  .ui-tabs__tab::after {
    content: "";
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: -1px;
    height: 2px;
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    background: transparent;
    transition: background-color var(--duration-fast) var(--ease-standard);
  }

  .ui-tabs__tab:focus-visible,
  .ui-tabs__tab.is-focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-width));
    border-radius: var(--radius-md);
  }

  @media (hover: hover) {
    .ui-tabs__tab:hover:not(:disabled, [aria-selected="true"], [aria-checked="true"], [aria-current="page"]) {
      --_fg: var(--color-text);
    }
  }

  .ui-tabs__tab.is-hovered {
    --_fg: var(--color-text);
  }

  .ui-tabs__tab[aria-selected="true"],
  .ui-tabs__tab[aria-checked="true"],
  .ui-tabs__tab[aria-current="page"] {
    --_fg: var(--color-text);
  }

  .ui-tabs__tab[aria-selected="true"]::after,
  .ui-tabs__tab[aria-current="page"]::after {
    background: var(--color-accent);
  }

  .ui-tabs__tab:disabled {
    --_fg: var(--color-text-disabled);
    cursor: not-allowed;
  }

  .ui-tabs__count {
    min-width: 20px;
    padding: 1px var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    text-align: center;
  }

  a.ui-tabs__tab {
    text-decoration: none;
  }

  .ui-tabs__tab[aria-selected="true"] .ui-tabs__count {
    background: var(--color-accent-soft);
    color: var(--color-accent-text);
  }

  .ui-tabs--fill .ui-tabs__tab {
    flex: 1 1 0;
  }

  .ui-tabs--segmented {
    gap: var(--space-0-5);
    padding: 3px;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--color-bg-hover);
  }

  .ui-tabs--segmented .ui-tabs__tab {
    flex: 1 1 0;
    min-height: max(38px, var(--control-h-sm));
    border-radius: var(--radius-lg);
  }

  .ui-tabs--segmented .ui-tabs__tab::after {
    content: none;
  }

  .ui-tabs--segmented .ui-tabs__tab[aria-selected="true"],
  .ui-tabs--segmented .ui-tabs__tab[aria-checked="true"],
  .ui-tabs--segmented .ui-tabs__tab[aria-current="page"] {
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-xs);
  }

  .ui-tabs__panel {
    padding-top: var(--space-4);
  }

  .ui-tabs__panel:focus-visible {
    outline-offset: var(--space-1);
    border-radius: var(--radius-md);
  }
}