:host {
  /* layout */
  --ld-tablist-max-height: 2.5rem;
  --ld-tablist-padding: 0px;

  /* colors */
  --ld-tablist-border-col: var(--ld-col-neutral-100);
  --ld-tablist-border-height: 0.1875rem;
  --ld-tablist-btn-scroll-col: var(--ld-col-neutral-900);
  --ld-tablist-btn-scroll-col-active: var(--ld-col-neutral-900);
  --ld-tablist-btn-scroll-bg-col: var(--ld-col-neutral-010);
  --ld-tablist-btn-scroll-bg-col-hover: var(--ld-col-neutral-100);
  --ld-tablist-btn-scroll-bg-col-active: var(--ld-col-neutral-300);

  /* theme colors */
  --ld-tablist-border-brand-col: var(--ld-thm-primary-hover);
  --ld-tablist-btn-scroll-bg-brand-col-active: var(--ld-thm-primary-active);
  --ld-tablist-btn-scroll-bg-brand-col-hover: var(--ld-thm-primary-hover);
  --ld-tablist-btn-scroll-bg-brand-col: var(--ld-thm-primary);

  /* theme colors (ld-tab) */
  --ld-tab-bg-brand-col-active: var(--ld-thm-primary-active);
  --ld-tab-bg-brand-col-focus: var(--ld-thm-primary-focus);
  --ld-tab-bg-brand-col-hover: var(--ld-thm-primary-hover);
  --ld-tab-bg-brand-col: var(--ld-thm-primary);
  --ld-tab-text-brand-col-focus: var(--ld-thm-primary-active);
  --ld-tab-disabled-bg-brand-col-focus: var(--ld-thm-primary-active);
  --ld-tab-disabled-text-brand-col-focus: var(--ld-thm-primary-focus);
  --ld-tab-disabled-text-brand-col: var(--ld-thm-primary-focus);
  --ld-tab-selected-border-brand-col: var(--ld-thm-secondary);

  /* transitions */
  --ld-tablist-transition-duration: 0s;
  @media (prefers-reduced-motion: no-preference) {
    --ld-tablist-transition-duration: var(--ld-transition-duration-normal);
  }

  position: relative; /* Host element needs to be offset parent. */
}

.ld-tablist {
  padding: var(--ld-tablist-padding);
  position: relative;
  display: flex;
  overflow: hidden;
  z-index: 0;
  background-color: var(--ld-tablist-btn-scroll-bg-col);
  max-height: var(
    --ld-tablist-max-height
  ); /* required to fix scrollbar issue on windows */

  &::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: var(--ld-tablist-border-height);
    background-color: var(--ld-tablist-border-col);
    z-index: 2;
  }

  &--rounded-all {
    border-radius: var(--ld-br-m);
  }

  &--rounded-all-lg {
    border-radius: var(--ld-br-l);
  }

  &--rounded-top {
    border-radius: var(--ld-br-m) var(--ld-br-m) 0 0;
  }

  &--rounded-top-lg {
    border-radius: var(--ld-br-l) var(--ld-br-l) 0 0;
  }

  & ::slotted(ld-tab) {
    --ld-tab-indicator-height: var(--ld-tablist-border-height);
  }

  &--sm {
    --ld-tablist-max-height: 2rem;

    ::slotted(ld-tab) {
      --ld-tab-font: var(--ld-typo-body-s);
      --ld-tab-gap: 0.375rem;
      --ld-tab-min-height: 2rem;
      --ld-tab-padding-x: 0.625rem;
      --ld-tab-padding-y: 0.5rem;
    }
  }

  &--lg {
    --ld-tablist-max-height: 3.125rem;

    ::slotted(ld-tab) {
      --ld-tab-font: var(--ld-typo-body-l);
      --ld-tab-gap: 0.875rem;
      --ld-tab-min-height: 3.125rem;
      --ld-tab-padding-x: 1.3125rem;
      --ld-tab-padding-y: 0.75rem;
    }
  }

  &--ghost {
    --ld-tablist-btn-scroll-bg-col: transparent;
    ::slotted(ld-tab) {
      --ld-tab-bg-col: transparent;
    }
  }

  &--brand-color {
    /* ld-tablist internal vars */
    --ld-tablist-btn-scroll-col-active: var(--ld-col-wht);
    --ld-tablist-btn-scroll-col: var(--ld-col-wht);
    --ld-tablist-btn-scroll-bg-col: var(--ld-tablist-btn-scroll-bg-brand-col);
    --ld-tablist-btn-scroll-bg-col-hover: var(
      --ld-tablist-btn-scroll-bg-brand-col-hover
    );
    --ld-tablist-btn-scroll-bg-col-active: var(
      --ld-tablist-btn-scroll-bg-brand-col-active
    );
    --ld-tablist-border-col: var(--ld-tablist-border-brand-col);

    ::slotted(ld-tab) {
      --ld-tab-disabled-opacity: 0.5;
      --ld-tab-disabled-content-opacity: 1;

      /* colors */
      --ld-tab-selected-text-col-focus: var(--ld-col-wht);
      --ld-tab-selected-text-col: var(--ld-col-wht);
      --ld-tab-text-col: var(--ld-col-wht);
      --ld-tab-text-col-hover: var(--ld-col-wht);

      /* theme colors */
      --ld-tab-bg-col: var(--ld-tab-bg-brand-col);
      --ld-tab-bg-col-focus: var(--ld-tab-bg-brand-col-focus);
      --ld-tab-bg-col-hover: var(--ld-tab-bg-brand-col-hover);
      --ld-tab-bg-col-active: var(--ld-tab-bg-brand-col-active);
      --ld-tab-disabled-bg-col-focus: var(--ld-tab-disabled-bg-brand-col-focus);
      --ld-tab-disabled-text-col-focus: var(
        --ld-tab-disabled-text-brand-col-focus
      );
      --ld-tab-disabled-text-col: var(--ld-tab-disabled-text-brand-col);
      --ld-tab-selected-border-col-focus: var(--ld-tab-selected-border-col);
      --ld-tab-selected-border-col: var(--ld-tab-selected-border-brand-col);
      --ld-tab-text-col-focus: var(--ld-tab-text-brand-col-focus);
    }
  }

  &--floating,
  &--floating-on-brand-color {
    --ld-tablist-padding: var(--ld-sp-8) 0;
    --ld-tab-border-radius: var(--ld-br-m);
    --ld-tab-selected-border-display: none;
    --ld-tab-text-col-focus: var(--ld-tab-text-brand-col-focus);
    border-radius: var(--ld-br-l);

    &::after {
      content: none;
    }

    .ld-tablist__scroll-container {
      gap: var(--ld-sp-8);
      padding-left: var(--ld-sp-8);
      padding-right: var(--ld-sp-8);
      position: relative;
      scroll-snap-type: none;
    }

    ::slotted(ld-tab) {
      /* colors */
      --ld-tab-selected-text-col-focus: var(--ld-col-wht);
      --ld-tab-selected-text-col: var(--ld-col-wht);
      --ld-tab-bg-col: transparent;
      --ld-tab-bg-col-active: transparent;
      --ld-tab-bg-col-hover: transparent;
      --ld-tab-bg-col-focus: transparent;
      --ld-tab-disabled-bg-col-focus: transparent;
      --ld-tab-disabled-text-col-focus: var(--ld-col-neutral-700);
      --ld-tab-selected-bg-col-hover: transparent;
      --ld-tab-selected-bg-col-active: transparent;
      --ld-tab-text-col-hover: var(--ld-thm-primary-hover);
      --ld-tab-text-col-focus: var(--ld-thm-primary-focus);
    }
  }

  &--floating-on-brand-color {
    --ld-tablist-btn-scroll-bg-col: var(--ld-col-wht);
  }
}

.ld-tablist__scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4rem;
  margin-bottom: -4rem;
}

.ld-tablist__btn-scroll {
  position: relative;
  border: 0;
  text-decoration: none;
  user-select: none;
  touch-action: manipulation;
  justify-content: center;
  align-items: center;
  -webkit-touch-callout: none;
  color: var(--ld-tablist-btn-scroll-col);
  background-color: var(--ld-tablist-btn-scroll-bg-col);
  box-shadow: var(--ld-shadow-active);
  width: var(--ld-sp-32);
  z-index: 2;

  &:focus:focus-visible {
    outline: none;
  }

  &[aria-disabled]:where(:not([aria-disabled=''], [aria-disabled='false'])) {
    svg {
      opacity: 0.25;
    }
  }

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

    @media (hover: hover) {
      &:hover {
        background-color: var(--ld-tablist-btn-scroll-bg-col-hover);
      }
    }
    &:active:focus,
    &:active:focus:focus-visible {
      color: var(--ld-tablist-btn-scroll-col-active);
      background-color: var(--ld-tablist-btn-scroll-bg-col-active);
    }
  }

  &--left {
    left: 0;
  }
  &--right {
    right: 0;
  }
}

.ld-tablist__active-tab-indicator {
  background-color: var(--ld-thm-primary);
  border: solid $colorSynBrightBlue 2px;
  border-radius: var(--ld-br-m);
  height: var(--ld-tablist-max-height);
  opacity: 0;
  position: absolute;
  width: 0;
  will-change: transform, width;
  z-index: -1;

  /* stylelint-disable plugin/no-low-performance-animation-properties */
  .ld-tablist--initialized & {
    transition:
      width var(--ld-tablist-transition-duration) ease,
      transform var(--ld-tablist-transition-duration) ease,
      opacity var(--ld-tablist-transition-duration)
        var(--ld-tablist-transition-duration) linear;
  }
  /* stylelint-enable plugin/no-low-performance-animation-properties */

  .ld-tablist--focus-visible.ld-tablist--selected-focused:focus-within & {
    background-color: var(--ld-thm-primary-focus);
  }
}
