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

@layer components {
  .bar__item {
    @include mixins.bar-item-base();

    &--shrinkable {
      @include mixins.bar-item-shrinkable;
    }

    &--fill {
      @include mixins.bar-item-fill;
    }
  }

  .bar {
    $this: &;

    @include mixins.bar-base();
    @include mixins.bar-horizontal();

    &--nowrap {
      @include mixins.bar-nowrap();
    }

    > .bar__item {
      @include mixins.bar-item-horizontal();
    }

    @each $space, $size in config.$spacing {
      &#{generate.variant-name($space, "--space-")} {
        > .bar__item {
          @include mixins.bar-item-spacing("horizontal", $size);
        }
        @include mixins.bar-spacing("horizontal", $size);
      }
    }

    &--vertical {
      @include mixins.bar-vertical();

      > .bar__item {
        @include mixins.bar-item-vertical();
      }

      @each $space, $size in config.$spacing {
        &#{generate.variant-name($space, "#{$this}--space-")} {
          //stylelint-disable-next-line max-nesting-depth
          > .bar__item {
            @include mixins.bar-item-spacing("vertical", $size);
          }
        }
      }
    }
  }

  .bar__break {
    @include mixins.bar-break;
  }
}