/* Tabs
 * Two patterns:
 * 1. Pill tabs — rounded, used for sub-views (lineup timeline/schedule/browse, crew chat/members)
 * 2. Underline tabs — classic bottom-border tabs for secondary navigation
 *
 * Pill tabs pair with Turbo Frames for content switching.
 */

@layer components {
  /* ── Pill tabs (primary pattern) ── */

  .pill-tabs {
    display: flex;
    gap: 6px;
    padding-inline: 20px;
    margin-block-end: 8px;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: none;

    &::-webkit-scrollbar { display: none; }
  }

  .pill-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--color-surface);
    border: 1px solid var(--color-border-interactive);
    color: var(--color-ink-muted);
    cursor: pointer;
    white-space: nowrap;
    min-height: var(--touch-min);
    text-decoration: none;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;

    &:hover {
      color: var(--color-ink);
      border-color: var(--color-ink-muted);
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: 2px;
    }

    &[aria-selected="true"],
    &.active {
      background: oklch(var(--lch-flare));
      border-color: oklch(var(--lch-flare));
      color: oklch(17% 0.02 276);
    }
  }

  /* ── Underline tabs (secondary pattern) ── */

  .tabs {
    display: flex;
    gap: 0;
    border-block-end: 2px solid var(--color-border);
  }

  .tabs__tab {
    min-height: var(--touch-min);
    padding: 0.625rem 1rem;
    color: var(--color-ink-muted);
    text-decoration: none;
    border-block-end: 2px solid transparent;
    margin-block-end: -2px;
    transition: color 100ms ease, border-color 100ms ease;

    &:hover {
      color: var(--color-ink);
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: -2px;
    }

    &[aria-selected="true"],
    &.active {
      color: oklch(var(--lch-flare));
      border-block-end-color: oklch(var(--lch-flare));
      font-weight: 600;
    }
  }
}