@use "colors";

@mixin font($fontFamily: sans-serif, $size: 1em, $color: colors.$blue, $weight: normal) {
  font-family: $fontFamily;
  font-size: $size;
  font-weight: $weight;
  color: $color;
  transition: color ease-out 100ms, font-size ease-out 100ms;
}

$Inter: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Helvetica Neue, sans-serif;

@mixin Inter($size: 1em, $color: colors.$blue, $weight: normal) {
  @include font($Inter, $size, $color, $weight);
}

@mixin label($size: .7em, $color: rgba(colors.$blue, .5)) {
  @include Inter($size, $color, bold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

@mixin label-light($size: .7em) {
  @include label($size, rgba(white, .5));
}