@use "../../../styles/tools/generate";
@use "./config";
@use "./mixins";

@layer components {
  .list {
    $this: &;
    @include mixins.list-base();

    &--spacious {
      @include mixins.list-spacious();
    }

    &__item {
      @include mixins.item-base();

      #{$this}--enclosed > & {
        @include mixins.enclosed-item();
      }
    }

    @each $color, $value in config.$color-palette {
      &#{generate.variant-name($color)} > &__item {
        @include mixins.item-color($color);
      }
    }

    @each $size, $value in config.$spacing {
      &#{generate.variant-name($size)} > &__item {
        @include mixins.item-size($size);
      }
    }

    &__control {
      @include mixins.control();
    }

    &__indicator {
      @include mixins.indicator();
    }

    &--nested-enclosed {
      > #{$this}__item {
        @include mixins.nested-enclosed();
      }
    }
  }
}