//   .d888                  888          .d888
// d88P"                   888         d88P"
// 888                     888         888
// 888888 .d88b.  88888b.  888888      888888 8888b.   .d8888b .d88b.
// 888   d88""88b 888 "88b 888         888       "88b d88P"   d8P  Y8b
// 888   888  888 888  888 888  888888 888   .d888888 888     88888888
// 888   Y88..88P 888  888 Y88b.       888   888  888 Y88b.   Y8b.
// 888    "Y88P"  888  888  "Y888      888   "Y888888  "Y8888P "Y8888

// Font Definition
//
// ^^^scss
// @include font-def($family, $variant, $weight, $style, $stretch);
// ^^^
//
// The `font-def()` Sass mixin takes five parameters, the first two of which are required. You must pass the font family name (`$family`) and font variant name (`$variant`) to generate a @font-face definition. **_This function is used to generate `@font-face` declarations in [Components ➔ Typography](/components/typography)._**
//
// You can also pass the following optional parameters:
//
// * `$weight` — `normal` | `bold` | `100` | `200` | `300` | … | `800` | `900`
// * `$style` — `normal` | `italic`
// * `$stretch` — `normal` | `ultra-condensed` | `extra-condensed` | `condensed` | `semi-condensed` | `semi-expanded` | `expanded` | `extra-expanded` | `ultra-expanded`
//
// The optional parameters will all default to `normal` if they are not passed. *The `$stretch` variable is currently not used in our design system, but is available for potential future use.*
//
// For example, this <abbr>SCSS</abbr> code:
//
// ^^^scss
// @include font-def(Raleway, semibolditalic, 600, italic, normal);
// ^^^
//
// will compile to this <abbr>CSS</abbr>:
//
// Markup:
// SCSS:
// @font-face {
//   font-family: 'Raleway';
//   font-stretch: normal;
//   font-style: italic;
//   font-weight: 600;
//   src: url('../fonts/raleway-semibolditalic.woff') format('woff'),
//        url('../fonts/raleway-semibolditalic.woff2') format('woff2');
// }
//
// Styleguide SassDirectives.FontDefinition
//
// Weight: 3
@mixin font-def($family, $variant, $weight: normal, $style: normal, $stretch: normal) {
  @font-face {
    font-family: '#{$family}';
    font-stretch: #{$stretch};
    font-style: #{$style};
    font-weight: #{$weight};
    src: url('#{$font-path}/#{str-replace(to-lower-case(inspect($family)), " ")}-#{$variant}.woff2')
        format('woff2'),
      url('#{$font-path}/#{str-replace(to-lower-case(inspect($family)), " ")}-#{$variant}.woff')
        format('woff');
  }
}