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

@layer components {
  .btn {
    @include mixins.base;
    @include mixins.layout;
  }

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

  @each $variant, $props in config.$variants {
    .btn#{generate.variant-name($variant)} {
      @include mixins.color($variant, false);
    }
  }

  .btn--square {
    @include mixins.square-base;

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

  .btn__icon-left {
    @include mixins.icon("left");
  }

  .btn__icon-right {
    @include mixins.icon("right");
  }

  .btn--large .icon--large {
    @include mixins.large-button-large-icon-size-fix();
  }

  .btn--preserve-width {
    @include mixins.preserve-width;
  }
}