@import 'themes/default';
@import 'themes/bandit';

.Tabs {
  &__TabsList {
    display: flex;
    gap: var(--List____gap);
    margin: 0;
  }

  &__ListItem {
    flex: none;
    margin: 0;
  }

  &__TabItem {
    height: var(--TabItem__height);
    display: flex;
    justify-content: stretch;
    align-items: center;
    gap: var(--TabItem____gap);
    cursor: var(--TabItem____cursor);
    padding: var(--TabItem____padding);
    border-radius: var(--TabItem____border-radius);
    font-size: var(--TabItem____font-size);
    font-weight: var(--TabItem____font-weight);
    transition: background var(--timing--hover);
    text-decoration: none;

    & > * {
      flex: none;
    }

    &--padding-tight {
      padding: var(--TabItem____padding--tight);
    }

    &--selected {
      font-weight: var(--TabItem--selected____font-weight);
    }

    &--disabled {
      font-weight: var(--TabItem____font-weight);
      color: var(--TabItem--disabled____color);
      pointer-events: none;
    }
  }

  &__Badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--TabBadge____padding);
    border-radius: var(--TabBadge____border-radius);

    span {
      display: block;
      font-size: var(--TabBadge____font-size);
      font-weight: var(--TabBadge____font-weight);
    }
  }

  &__ListItem--Default {
    .Tabs__TabItem {
      color: var(--TabItem____color);
      background: var(--TabItem____bg-color);

      & > * {
        flex: none;
      }

      &:hover,
      &:focus-visible {
        background: var(--TabItem--hover____bg-color);
      }

      &:active {
        background: var(--TabItem--pressed____bg-color);
      }

      &--selected {
        background: var(--TabItem--selected____bg-color);
      }

      &--disabled {
        color: var(--TabItem--disabled____color);
        background: var(--TabItem--disabled____bg-color);
        pointer-events: none;
      }
    }

    .Tabs__Badge {
      background: var(--TabBadge____bg-color);
    }
  }

  &__ListItem--AI {
    .Tabs__Badge {
      background: var(--TabBadge--ai____bg-color);
    }

    .Tabs__TabItem {
      color: var(--TabItem--ai____color);
      background: var(--TabItem--ai____bg-color);

      & > * {
        flex: none;
      }

      &:hover,
      &:focus-visible,
      &:active,
      &--selected {
        .Tabs__Badge {
          background: var(--TabBadge--ai-interacted____bg-color);
        }
      }

      &:hover,
      &:focus-visible {
        background: var(--TabItem--ai-hover____bg-color);
      }

      &:active {
        background: var(--TabItem--ai-pressed____bg-color);
      }

      &--selected {
        background: var(--TabItem--ai-selected____bg-color);
      }

      &--disabled {
        color: var(--TabItem--disabled____color);
        background: var(--TabItem--disabled____bg-color);
        pointer-events: none;

        .Tabs__Badge {
          background: var(--TabBadge____bg-color);
        }
      }
    }
  }

  &__Badge {
    background: var(--TabBadge____bg-color);
    transition: background var(--timing--hover);
  }

  &__Label {
    position: relative;
    text-align: center;
    line-height: var(--line-height--solid);

    // This pseudo-element is used to ensure that the bolded/selected label weight space is reserved.
    // This prevents the label's container from changing width when its selected state changes.
    &::after {
      content: attr(data-label);
      visibility: hidden;
      display: block;
      height: 0;
      font-weight: var(--TabItem--selected____font-weight);
    }
  }
}