@use 'sass:map';
@use 'sass:list';
@import '@material-symbols/font-400/core';

$material-symbols-font-path: './fonts/';

@include material-symbols-font('Material Symbols Sharp');

$font-library: ( );
$variable-font-library: (
  'Inter': (
    'slnt': -10,
    'wght': 900,
  ),
  'Roboto': (
    'wght': 900,
  ),
);

@each $typeface, $variants in $font-library {
  @each $variant, $props in $variants {
    @font-face {
      font-family: '#{$typeface}';
      src: url('fonts/#{$typeface}#{$variant}.woff2') format('woff2'),
        url('fonts/#{$typeface}#{$variant}.woff') format('woff');
      font-style: #{map.get($props, style)};
      font-weight: #{map.get($props, weight)};
      font-display: swap;
    }
  }
}

@each $typeface, $features in $variable-font-library {
  $settings: ();

  @each $feature, $props in $features {
    $settings: list.append($settings, '"#{$feature}" #{$props}', 'comma');
  }

  @font-face {
    font-family: '#{$typeface}';
    src: url('fonts/#{$typeface}.woff2') format('woff2-variations');
  }
}
