/*
  Sizes: .a-tab--lg (large) - small is default
  - All tabs are 28px height by default
  - Large tabs with badges automatically become 32px (via :has(.a-badge))
  
  Structure:
  - Basic: .a-tabs > .a-tab
  - Scrollable: .a-tabs.a-tabs--scrollable > .a-tabs-scroller > .a-tab
  
  States: [aria-selected="true"], [disabled] / [aria-disabled="true"]
  
  Content:
  - .a-tab-content--leading for icons
  - .a-badge (from badge.css) for trailing badges
  
  Scrollable tabs: .a-tabs--scrollable > .a-tabs-scroller > .a-tab
  - Scroller scrolls horizontally when tabs overflow (native, no JS required)
  - Optional fade on edges via data-fade="start|end|both" attribute
*/

.a-tabs {
  --tab-gap: var(--lens-core-spacing-1);
  --divider-color: var(--lens-semantic-color-ui-divider-default);
  --divider-height: var(--lens-core-spacing-px);
  display: flex;
  align-items: center;
  gap: var(--a-tabs-gap, var(--tab-gap));
  min-block-size: 28px;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    block-size: var(--a-tabs-divider-height, var(--divider-height));
    background-color: var(--a-tabs-divider-color, var(--divider-color));
    z-index: 0;
  }
}

.a-tabs--scrollable {
  --tabs-scroll-fade: var(--a-tabs-scroll-fade, var(--lens-core-spacing-3));
  display: block;
}

.a-tabs--scrollable .a-tabs-scroller {
  display: flex;
  align-items: center;
  gap: var(--a-tabs-gap, var(--tab-gap));
  min-block-size: inherit;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--tabs-scroll-fade);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.a-tabs--scrollable .a-tabs-scroller::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .a-tabs--scrollable .a-tabs-scroller {
    scroll-behavior: auto;
  }
}

.a-tabs--scrollable[data-fade="start"] .a-tabs-scroller,
.a-tabs--scrollable[data-fade="start"]::after {
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--tabs-scroll-fade));
  mask-image: linear-gradient(to right, transparent, black var(--tabs-scroll-fade));
}

.a-tabs--scrollable[data-fade="end"] .a-tabs-scroller,
.a-tabs--scrollable[data-fade="end"]::after {
  -webkit-mask-image: linear-gradient(to left, transparent, black var(--tabs-scroll-fade));
  mask-image: linear-gradient(to left, transparent, black var(--tabs-scroll-fade));
}

.a-tabs--scrollable[data-fade="both"] .a-tabs-scroller,
.a-tabs--scrollable[data-fade="both"]::after {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--tabs-scroll-fade),
    black calc(100% - var(--tabs-scroll-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--tabs-scroll-fade),
    black calc(100% - var(--tabs-scroll-fade)),
    transparent 100%
  );
}

.a-tab {
  --tab-height: 28px;
  --tab-border-radius-start-start: var(--a-tab-border-radius, var(--lens-semantic-radius-md));
  --tab-border-radius-start-end: var(--a-tab-border-radius, var(--lens-semantic-radius-md));
  --tab-border-radius-end-start: 0;
  --tab-border-radius-end-end: 0;
  --tab-padding-block-start: var(--a-tab-padding-block, 6px);
  --tab-padding-block-end: var(--a-tab-padding-block, 6px);
  --tab-padding-inline-start: var(
    --a-tab-padding-inline,
    var(--lens-semantic-spacing-desktop-padding-2)
  );
  --tab-padding-inline-end: var(
    --a-tab-padding-inline,
    var(--lens-semantic-spacing-desktop-padding-2)
  );
  --tab-gap: var(--lens-semantic-spacing-desktop-gap-1);
  --tab-font-size: var(--lens-semantic-font-text-md-font-size);
  --tab-font-weight: var(--lens-core-font-weight-semi-bold);
  --tab-line-height: var(--lens-semantic-font-text-md-line-height);
  --tab-letter-spacing: var(--lens-semantic-font-text-md-letter-spacing);
  --tab-icon-size: var(--lens-semantic-icon-size-md);
  --tab-bg: var(--lens-core-color-transparent);
  --tab-color: var(--lens-semantic-color-action-secondary-on-secondary);
  --tab-indicator-color: var(--lens-core-color-transparent);
  --tab-indicator-height: 0px;
  appearance: none;
  box-sizing: border-box;
  background: var(--a-tab-bg, var(--tab-bg));
  border: none;
  border-start-start-radius: var(--tab-border-radius-start-start);
  border-start-end-radius: var(--tab-border-radius-start-end);
  border-end-start-radius: var(--tab-border-radius-end-start);
  border-end-end-radius: var(--tab-border-radius-end-end);
  color: var(--a-tab-color, var(--tab-color));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--a-tab-height, var(--tab-height));
  min-block-size: var(--a-tab-height, var(--tab-height));
  gap: var(--a-tab-gap, var(--tab-gap));
  padding-block-start: var(--tab-padding-block-start);
  padding-block-end: var(--tab-padding-block-end);
  padding-inline-start: var(--tab-padding-inline-start);
  padding-inline-end: var(--tab-padding-inline-end);
  font-family: var(--lens-semantic-font-family-label);
  font-size: var(--a-tab-font-size, var(--tab-font-size));
  font-weight: var(--a-tab-font-weight, var(--tab-font-weight));
  line-height: var(--a-tab-line-height, var(--tab-line-height));
  letter-spacing: var(--a-tab-letter-spacing, var(--tab-letter-spacing));
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition-property: background-color, color;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  &::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    block-size: var(--lens-core-spacing-px);
    background-color: var(--lens-semantic-color-ui-divider-default);
    z-index: 1;
  }
  &:hover {
    --tab-bg: var(--lens-semantic-color-action-secondary-hover-fill);
  }
  &:active {
    --tab-bg: var(--lens-semantic-color-action-secondary-active-fill);
  }
  &:focus-visible {
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: var(--lens-semantic-border-width-focus-offset);
  }
  &[disabled],
  &[aria-disabled="true"] {
    --tab-color: var(--lens-semantic-color-action-secondary-on-secondary-disabled);
    cursor: not-allowed;
    &:hover {
      --tab-bg: var(--lens-core-color-transparent);
    }
  }
  &[aria-selected="true"] {
    --tab-indicator-color: var(
      --lens-semantic-color-action-secondary-inverse-selection-indicator-tabs
    );
    --tab-indicator-height: var(--lens-core-spacing-0-25);
    &::before {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: var(--a-tab-indicator-height, var(--tab-indicator-height));
      background-color: var(--a-tab-indicator-color, var(--tab-indicator-color));
      border-start-start-radius: var(--a-tab-indicator-height, var(--tab-indicator-height));
      border-start-end-radius: var(--a-tab-indicator-height, var(--tab-indicator-height));
      z-index: 2;
    }
    &:hover {
      --tab-bg: var(--lens-semantic-color-action-secondary-hover-fill);
    }
    &:active {
      --tab-bg: var(--lens-semantic-color-action-secondary-active-fill);
    }
    &[disabled],
    &[aria-disabled="true"] {
      --tab-color: var(--lens-semantic-color-action-secondary-on-secondary-disabled);
      --tab-indicator-color: var(--lens-semantic-color-action-primary-disabled);
      &:hover {
        --tab-bg: var(--lens-core-color-transparent);
      }
    }
  }
  &.a-tab--lg {
    &:has(.a-badge) {
      --tab-height: var(--lens-core-spacing-4);
    }
  }
  & .a-tab-content--leading {
    &:is(svg),
    & svg {
      fill: currentColor;
    }
    inline-size: var(--a-tab-icon-size, var(--tab-icon-size));
    block-size: var(--a-tab-icon-size, var(--tab-icon-size));
  }
}