@use "./config";
@use "./mixins";
@use "../../../styles/tools/generate";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/typography/mixins" as typography;

@layer components {
  .tab-list__viewport {
    @include mixins.list-viewport;
  }

  .tab-list {
    $this: &;

    @include typography.list-unstyled;
    @include mixins.list-base;

    &--equal {
      @include mixins.list-equal;
    }

    &__item {
      @include mixins.list-item;

      #{$this}--equal & {
        @include mixins.list-equal-item;
      }
    }

    &__tab {
      @include mixins.tab;
      @include mixins.color-variant;

      @each $size, $props in config.$tab-sizes {
        &#{generate.variant-name($size)} {
          @include mixins.tab-size($size);
        }
      }
    }

    &__hr {
      @include mixins.underline;
    }
  }
}