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

  l-tabs {
    display: block;
  }

  l-tabs [role='tablist'] {
    --_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 [role='tablist'] {
      --_duration: 0ms;
    }

    l-tabs [role='tab'] {
      transition-duration: 0ms;
    }
  }

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

  l-tabs [role='tab'] {
    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']) {
        color: var(--l-color-text-primary);
      }
    }

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

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

  l-tabs [role='tabpanel'] {
    &:focus-visible {
      outline: 2px solid var(--l-focus-ring);
      outline-offset: 2px;
      border-radius: var(--l-radius-sm);
    }
  }

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

  l-tabs[full-width] [role='tablist'] {
    width: 100%;
  }

  l-tabs[full-width] [role='tab'] {
    flex: 1;
    text-align: center;
  }
}

@layer components {
  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   Variant: enclosed
   A pill-shaped tablist with a sliding background indicator behind the active tab.
   Visual reference: https://ui.shadcn.com/docs/components/radix/tabs
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  */

  l-tabs[variant='enclosed'] {
    & [role='tablist'] {
      background: var(--l-color-bg-fill-neutral-subtle);
      border-radius: var(--l-radius-lg);
      padding: calc(var(--spacing) * 1);
      gap: calc(var(--spacing) * 1);
      box-shadow: inset 0 0 0 1px var(--l-color-divider);

      &::before {
        background: var(--l-color-surface);
        border-radius: var(--l-radius-md);
        box-shadow:
          0 1px 3px 0 rgb(0 0 0 / 0.08),
          0 1px 2px -1px rgb(0 0 0 / 0.08);
        inset-block: calc(var(--spacing) * 1);
        z-index: 0;
      }
    }

    & [role='tab'] {
      position: relative;
      z-index: 1;
      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
      border-radius: var(--l-radius-md);
    }
  }
}