// Typography helpers

/* stylelint-disable declaration-property-unit-allowed-list */
// Helper mixin for self-hosted fonts
@mixin fontFace($family, $src, $weight: normal, $style: normal) {
  @font-face {
    // @link https://css-tricks.com/almanac/properties/f/font-display/
    font-display: auto;
    font-family: $family;
    font-style: $style;
    font-weight: $weight;

    // Slightly Deeper Browser Support
    // @source https://css-tricks.com/snippets/css/using-font-face/#slightly-deeper-browser-support
    src: url('#{$src}.woff') format('woff'), url('#{$src}.woff2') format('woff2'), url('#{$src}.ttf') format('truetype');
  }
}

// Responsive fonts
@mixin responsive-font($min-font-size, $max-font-size, $min-vw: 320px, $max-vw: 1920px) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    font-size: $min-font-size;

    @media screen and (min-width: $min-vw) {
      font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
    }

    @media screen and (min-width: $max-vw) {
      font-size: $max-font-size;
    }
  }
}
/* stylelint-enable declaration-property-unit-allowed-list */