@use "npm:@fontsource-utils/scss/src/mixins.scss" as fontsource with (
  $display: auto
);
@use "npm:@fontsource-variable/arimo/scss/metadata.scss" as arimo;
@use "npm:@fontsource-variable/nunito/scss/metadata.scss" as nunito;

@include fontsource.faces(
  $metadata: nunito.$metadata,
  $weights: (
    300,
    400,
    500,
    600,
    700,
  ),
  $subsets: latin,
  $styles: (
    normal,
    italic,
  ),
  $family: "Nunito",
  $directory: "npm:@fontsource-variable/nunito/files"
);

@include fontsource.faces(
  $metadata: arimo.$metadata,
  $weights: 400,
  $subsets: latin,
  $styles: normal,
  $family: "Arimo",
  $directory: "npm:@fontsource-variable/arimo/files"
);

// Hack *does* come with its own CSS, but it's broken and hasn't seen
// a release since https://github.com/source-foundry/Hack/issues/467
// was resolved.

$variants: regular normal, bold normal, italic italic, bolditalic italic;

@each $name, $style in $variants {
  @font-face {
    font-family: "Hack";
    font-style: $style;
    font-display: auto;
    font-weight: 400 700;
    src: url("npm:hack-font/build/web/fonts/hack-#{$name}-subset.woff2") format("woff2-variations");
  }
}
