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

@mixin base() {
  --icon-size: 1em;
  fill: currentColor;
  width: var(--icon-size);
  height: var(--icon-size);
  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)} {
          --icon-size: #{$size};
        }
      }
    }
  }
}

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