@layer components {
  /* 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>
   */

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

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

    &: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;
    }
  }

}