@use 'sass:meta';
@use 'sass:string';
@use 'variables';
@use 'functions';
@use 'utilities';

@mixin compound($map, $important: false) {
  @each $prop, $value in $map {
    @if meta.type-of($value) == string {
      #{$prop}: #{string.unquote($value)} functions.important($important, $prop);
    } @else {
      #{$prop}: #{$value} functions.important($important, $prop);
    }
  }
}

@mixin breakpoint($key, $prop: min-width) {
  @if $prop == max-width {
    @media (#{$prop}: utilities.fetch(variables.$breakpoints, $key)) {
      @content;
    }
  }

  @if $prop == min-width {
    @media (#{$prop}: (utilities.fetch(variables.$breakpoints, $key) + variables.$root-one-px)) {
      @content;
    }
  }
}

@mixin text($key, $font: sans, $important: false) {
  font-family: functions.font-family($font) functions.important($important, font-family);
  @include compound(functions.text-treatment($key), $important);
}