:host {
  --ld-tab-font: var(--ld-typo-body-m);
  --ld-tab-gap: 0.625rem;
  --ld-tab-min-height: 2.5rem;
  --ld-tab-disabled-opacity: 1;
  --ld-tab-disabled-content-opacity: 0.25;
  --ld-tab-padding-x: 0.875rem;
  --ld-tab-padding-y: 0.75rem;

  /* colors */
  --ld-tab-bg-col-active: var(--ld-col-neutral-200);
  --ld-tab-bg-col-focus: var(--ld-col-neutral-600);
  --ld-tab-bg-col-hover: var(--ld-col-neutral-100);
  --ld-tab-bg-col: var(--ld-col-neutral-010);
  --ld-tab-disabled-bg-col-focus: var(--ld-col-neutral-400);
  --ld-tab-disabled-text-col-focus: var(--ld-col-wht);
  --ld-tab-disabled-text-col: var(--ld-col-neutral-900);
  --ld-tab-text-col-focus: var(--ld-col-neutral-100);
  --ld-tab-text-col: var(--ld-col-neutral-900);

  /* theme colors */
  --ld-tab-selected-border-col-focus: var(--ld-thm-primary-focus);
  --ld-tab-selected-border-col: var(--ld-thm-primary);
  --ld-tab-selected-text-col-focus: var(--ld-thm-primary-focus);
  --ld-tab-selected-text-col: var(--ld-thm-primary);
}

.ld-tab {
  position: relative;
  font: var(--ld-tab-font);
  font-weight: 700;
  border: 0;
  border-radius: var(--ld-tab-border-radius, 0);
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  display: grid;
  grid-template-columns: minmax(0, var(--ld-sp-16)) max-content minmax(
      0,
      var(--ld-sp-16)
    );
  align-items: center;
  text-align: center;
  justify-content: center;
  line-height: 1;
  scroll-snap-align: start;
  white-space: nowrap;
  -webkit-touch-callout: none;
  padding: var(--ld-tab-padding-y) var(--ld-tab-padding-x);
  min-height: var(--ld-tab-min-height);
  color: var(--ld-tab-text-col);
  background-color: var(--ld-tab-bg-col);
  box-sizing: border-box;
  margin: 0;

  &[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])) {
    color: var(--ld-tab-disabled-text-col);
    opacity: var(--ld-tab-disabled-opacity);

    .ld-tab__content {
      opacity: var(--ld-tab-disabled-content-opacity);
    }
  }

  /* Selection indicator */
  &::after {
    content: '';
    display: var(--ld-tab-selected-border-display, block);
    position: absolute;
    inset: auto 0 0;
    height: var(--ld-tab-indicator-height);
    z-index: 3;
  }

  &[aria-selected='true'] {
    color: var(--ld-tab-selected-text-col);
    background-color: var(--ld-tab-bg-col);

    &::after {
      background-color: var(--ld-tab-selected-border-col);
    }
  }

  &:focus:focus-visible {
    --ld-tab-disabled-content-opacity: 0.5;
    outline: none;
    background-color: var(--ld-tab-bg-col-focus);

    &:not(:active) {
      color: var(--ld-tab-text-col-focus);
    }

    &[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])) {
      background-color: var(--ld-tab-disabled-bg-col-focus);
      color: var(--ld-tab-disabled-text-col-focus);
    }

    &[aria-selected='true'] {
      &:not(:active) {
        color: var(--ld-tab-selected-text-col-focus);
      }

      &::after {
        background-color: var(--ld-tab-selected-border-col-focus);
      }
    }

    &:not([aria-selected='true'])::after {
      background-color: inherit;
    }
  }

  &:where(
      :not(
          [aria-disabled]:where(
              :not([aria-disabled=''], [aria-disabled='false'])
            )
        )
    ) {
    cursor: pointer;

    @media (hover: hover) {
      &:hover {
        background-color: var(--ld-tab-bg-col-hover);

        &[aria-selected='true'] {
          background-color: var(
            --ld-tab-selected-bg-col-hover,
            var(--ld-tab-bg-col-hover)
          );
        }

        &:not([aria-selected='true']) {
          color: var(--ld-tab-text-col-hover);

          &::after {
            background-color: inherit;
          }
        }
      }
    }
    &:active:focus,
    &:active:focus:focus-visible {
      background-color: var(--ld-tab-bg-col-active);

      &[aria-selected='true'] {
        background-color: var(
          --ld-tab-selected-bg-col-active,
          var(--ld-tab-bg-col-active)
        );
      }

      &:not([aria-selected='true'])::after {
        background-color: inherit;
      }
    }
  }

  ::slotted(ld-icon),
  ::slotted(.ld-icon) {
    height: 0;
  }
}

.ld-tab__spacer {
  display: inline-flex;
  flex-shrink: 1;
  width: var(--ld-sp-16);
}

.ld-tab__content {
  display: grid;
  grid-auto-flow: column;
  gap: var(--ld-tab-gap);
  align-items: center;
}
