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

@mixin base() {
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: text-bottom;
}

@mixin sizes($sizes: config.$sizes) {
  @each $breakpoint, $props in $sizes {
    @include breakpoint.get($breakpoint) {
      @each $variant, $size in $props {
        &#{generate.variant-name($variant)} {
          width: $size;
          height: $size;
        }
      }
    }
  }
}

@mixin colors($colors: config.$colors) {
  @each $variant, $color in $colors {
    &#{generate.variant-name($variant)} {
      color: $color;
    }
  }
}
