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

@mixin base($config: config.$base) {
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  min-width: 1.22222em;
  min-height: 1.22222em;
  padding: 0 0.2em;
  border-radius: 999rem;
  font-size: inherit;
  line-height: inherit;
  vertical-align: bottom;
  aspect-ratio: 1 / 1;

  @include generate.css-map($config);
}

@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;
        }
      }
    }
  }
}