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

@layer components {
  .progress {
    @include mixins.base;

    &__bar {
      @include mixins.bar;
    }

    &__label {
      @include mixins.label;
    }

    &__value {
      @include mixins.value;
    }

    &__indicator {
      @include mixins.indicator;

      @each $name, $value in config.$colors {
        &#{generate.variant-name($name)} {
          @include mixins.indicator-color($name);
        }
      }
    }
  }
}