/* ---------------------------------- *\
  #FONT-FAMILY
\* ---------------------------------- */

/**
  * Abstracts how font family stacks are applied based on async font loading.
  */

@mixin font-family($family, $is-root: false, $weight: null) {
  @if ( length($family) and type-of(map-get-deep($font-stacks, $family, 'font-family')) == string ) {

    // $subset: map-get-deep($font-stacks, $family, 'font-subset');
    $fallback: map-get-deep($font-stacks, $family, 'fallback');
    $font_family: map-get-deep($font-stacks, $family, 'font-family');
    font-family: unquote($fallback);

    @if $is-root == false {

      .#{$fonts-loaded-class} & {
        font-family: unquote($font_family);

        @if ($weight) {
          font-weight: $weight;
        }
      }

    } @else {

      &.#{$fonts-loaded-class} {
        font-family: unquote($font_family);
        @if ($weight) {
          font-weight: $weight;
        }
      }
    }

  } @else {
    @error 'Sorry, but `#{$family}` is not a valid font-family variable. The only valid font-family values available are `heading`, `body` and `icon`';
  }
}