// Taken from: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_font-face.scss
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.

@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
  @font-face {
    font-family: $font-family;
    font-weight: $weight;
    font-style: $style;
    // font-display: swap;

    @if $asset-pipeline == true {
      src:
           font-url('#{$file-path}.woff')                format('woff'),
           font-url('#{$file-path}.ttf')                 format('truetype'),
    } @else {
      src:
           url('#{$file-path}.woff')                     format('woff'),
           url('#{$file-path}.ttf')                      format('truetype'),
    }
  }
}


@mixin icon($svg, $color: $black)
{
  @if variable-exists(iconPath)
  {
    background-image: svg-load('#{$iconPath}#{$svg}.svg', fill=$color);
  }
  @else
  {
    background-image: svg-load('../icon/#{$svg}.svg', fill=$color);
  }
}


@mixin aspect-ratio($width: 1, $height: 1)
{
  position: relative;
  &:before
  {
    display: block;
    content: " ";
    width: 100%;
    padding-top: calc($height / $width) * 100%;
  }

  > *
  {
    position: absolute;
    top: 0;
    left: 0;
  }
}