/* Tabs
 * Tab navigation with active state. Pairs with Turbo Frames for
 * content switching — each tab link targets a shared frame.
 *
 * Usage:
 *   <nav class="tabs" role="tablist">
 *     <a class="tabs__tab active" role="tab" href="/overview"
 *        data-turbo-frame="tab-content">Overview</a>
 *     <a class="tabs__tab" role="tab" href="/activity"
 *        data-turbo-frame="tab-content">Activity</a>
 *   </nav>
 *
 *   <turbo-frame id="tab-content" src="/overview">
 *     Loading...
 *   </turbo-frame>
 */

@layer components {
  .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 var(--color-link);
      outline-offset: -2px;
    }

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