@layer components {
  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Base
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  l-tabs {
    display: block;
  }

  /* Structural selectors (not [role='…']) so the tablist/tabs/panels are styled
     from the plain light DOM — the element is progressive, so it must look right
     before JS runs and adds the ARIA roles. First child = tablist; its buttons =
     tabs; remaining children = panels. JS only enhances (roles, keyboard, the
     sliding indicator, and hiding inactive panels). */
  l-tabs > :first-child {
    --_duration: 150ms;
    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);

    display: flex;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      pointer-events: none;
      will-change: transform, width;
      transition:
        transform var(--_duration) var(--_easing),
        width var(--_duration) var(--_easing);
      transform: translateX(var(--_indicator-left, 0));
      width: var(--_indicator-width, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    l-tabs > :first-child {
      --_duration: 0ms;
    }

    l-tabs > :first-child button {
      transition-duration: 0ms;
    }
  }

  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Tab trigger
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  l-tabs > :first-child button {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    height: var(--l-size-control-xl);
    white-space: nowrap;
    font-family: inherit;
    font-weight: 500;
    font-size: var(--l-text-sm);
    line-height: 1;
    color: var(--l-color-text-secondary);
    transition: color 150ms;
    -webkit-tap-highlight-color: transparent;

    &[aria-selected='true'] {
      color: var(--l-color-text-primary);
    }

    @media (hover: hover) {
      &:hover:not([aria-selected='true']):not(:disabled):not([aria-disabled='true']) {
        color: var(--l-color-text-primary);
      }
    }

    /* Placed after the selected and hover rules so a disabled tab still greys
       out when it is the selected one — equal specificity, source order wins. */
    &:disabled,
    &[aria-disabled='true'] {
      cursor: not-allowed;
      color: var(--l-color-text-disabled);
    }

    &:focus-visible {
      outline: 2px solid var(--l-focus-ring);
      outline-offset: -2px;
      border-radius: var(--l-radius-sm);
    }
  }

  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Tab panel
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  l-tabs > :not(:first-child) {
    &:focus-visible {
      outline: 2px solid var(--l-focus-ring);
      outline-offset: 2px;
      border-radius: var(--l-radius-sm);
    }
  }

  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Full width
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  l-tabs[full-width] > :first-child {
    width: 100%;
  }

  l-tabs[full-width] > :first-child button {
    flex: 1;
    text-align: center;
  }
}

@layer components {
  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Variant: line
   A tablist with a sliding underline indicator below the active tab.
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  l-tabs[variant='line'] {
    & > :first-child {
      border-bottom: var(--track-thickness, 1px) solid var(--track-color, var(--l-color-border));
      gap: 0;

      &::before {
        bottom: calc(-1 * var(--track-thickness, 1px));
        height: var(--indicator-thickness, 2px);
        background: var(--indicator-color, var(--l-color-text-primary));
        border-radius: var(--l-radius-full);
      }
    }

    & > :first-child button {
      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);

      /* `isolation` keeps the pill's negative z-index inside the button: it
         paints above the button background but under the label, and can never
         slip behind an ancestor's background (a card wrapping the tabs). */
      position: relative;
      isolation: isolate;

      /* Hover pill, detached from the track: inset on the block axis so it
         never touches the bottom border or the sliding indicator. A 4px inset
         on a 44px tab leaves a 36px pill — same height as a medium control. */
      &::after {
        content: '';
        position: absolute;
        z-index: -1;
        inset-block: var(--hover-inset, calc(var(--spacing) * 1));
        inset-inline: 0;
        border-radius: var(--l-radius-md);
        background: transparent;
        transition: background-color var(--_duration) var(--_easing);
      }

      /* Applies to the selected tab too — the fill is click feedback, not a
         selection cue (the underline carries that), so it would read as dead
         if the active tab were the one place it stopped responding. A disabled
         tab is the exception: `:hover` still matches it (the platform does not
         gate hover on `disabled`), and promising click feedback where no click
         will ever register is the wrong signal. */
      @media (hover: hover) {
        &:hover:not(:disabled):not([aria-disabled='true'])::after {
          background: var(--hover-color, var(--l-color-bg-state-hover));
        }
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    l-tabs[variant='line'] > :first-child button::after {
      transition-duration: 0ms;
    }
  }
}