$font-path: 'https://apolitical.co/fonts/Web/';
$font-name: 'Moderat';

@mixin font-styling($weight: 400, $style: normal) {
  $font-file: 'Medium';

  @if $weight == 600 {
    $font-file: 'Bold';
  } @else if $weight == 900 {
    $font-file: 'Black';
  }

  @if $style == italic {
    $font-file: '#{$font-file}-Italic';
  }

  @font-face {
    font-family: #{$font-name};
    src: url('#{$font-path}#{$font-name}-#{$font-file}.woff2') format('woff2');
    font-display: optional;
    font-weight: $weight;

    @if $style == italic {
      font-style: italic;
    }
  }
}

$font-family: (400, normal), (400, italic), (600, normal), (600, italic), (900, normal),
  (900, italic);

@layer base {
  @each $weight, $style in $font-family {
    @include font-styling($weight, $style);
  }

  body,
  button,
  input,
  textarea {
    font-family:
      #{$font-name},
      sans-serif;
  }
}
