@import "./media";

$rootFontFaceURL: "https://cdn.jsdelivr.net/gh/arxiv-vanity/computer-modern@ec5980c33198e5c15debcae604bfff93fed5abf5";
// FIXME: ideally this would be $fontDisplay, but percy produces indeterminate screenshots when that is the case
$fontDisplay: "auto";

@font-face {
  font-family: "Computer Modern Serif";
  src: url($rootFontFaceURL+"/serif/cmunrm.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: $fontDisplay;
}

@font-face {
  font-family: "Computer Modern Serif";
  src: url($rootFontFaceURL+"/serif/cmunbx.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: $fontDisplay;
}

@font-face {
  font-family: "Computer Modern Serif";
  src: url($rootFontFaceURL+"/serif/cmunti.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: $fontDisplay;
}

@font-face {
  font-family: "Computer Modern Serif";
  src: url($rootFontFaceURL+"/serif/cmunbi.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: $fontDisplay;
}

@font-face {
  font-family: "Computer Modern Typewriter";
  src: url($rootFontFaceURL+"/typewriter/cmuntt.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: $fontDisplay;
}

@font-face {
  font-family: "Computer Modern Typewriter";
  src: url($rootFontFaceURL+"/typewriter/cmuntb.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: $fontDisplay;
}

@font-face {
  font-family: "Computer Modern Typewriter";
  src: url($rootFontFaceURL+"/typewriter/cmunit.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: $fontDisplay;
}

@font-face {
  font-family: "Computer Modern Typewriter";
  src: url($rootFontFaceURL+"/typewriter/cmuntx.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: $fontDisplay;
}

$fontFamilyComputerModern: "Computer Modern Serif", Georgia, serif;
$fontFamilyHelvetica: "Helvetica Neue", Helvetica, sans-serif;
$fontFamilyMonospace: "Computer Modern Typewriter", monospace;

// !important is used everywhere to stop inline styles from changing the font size

@mixin font-body() {
  font-family: $fontFamilyComputerModern;
  font-size: 16px !important;
  line-height: 1.5;

  @include media(">=tablet", "<desktop") {
    font-size: 18px !important;
  }

  @include media(">=desktop", "<huge") {
    font-size: 20px !important;
  }

  @include media(">=huge") {
    font-size: 24px !important;
  }
}

@mixin font-caption() {
  font-family: $fontFamilyComputerModern;
  font-style: italic;
  line-height: 1.5;

  font-size: 12px !important;

  @include media(">=tablet", "<desktop") {
    font-size: 14px !important;
  }

  @include media(">=desktop") {
    font-size: 16px !important;
  }
}

@mixin font-monospace() {
  font-family: $fontFamilyMonospace;

  font-size: 14px !important;
  line-height: 1.5;

  @include media(">=tablet", "<desktop") {
    font-size: 16px !important;
  }

  @include media(">=desktop", "<huge") {
    font-size: 18px !important;
  }

  @include media(">=huge") {
    font-size: 20px !important;
  }
}

@mixin font-heading() {
  font-family: $fontFamilyHelvetica;

  font-size: 14px !important;
  line-height: 1.5;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;

  @include media(">=tablet", "<desktop") {
    font-size: 18px !important;
  }

  @include media(">=desktop") {
    font-size: 20px !important;
  }
}

@mixin font-heading-small() {
  @include font-heading();

  font-size: 12px !important;

  @include media(">=tablet", "<desktop") {
    font-size: 14px !important;
  }

  @include media(">=desktop") {
    font-size: 16px !important;
  }
}

@mixin font-sans() {
  font-family: $fontFamilyHelvetica;
  font-size: 12px !important;

  @include media(">=tablet", "<desktop") {
    font-size: 14px !important;
  }

  @include media(">=desktop") {
    font-size: 16px !important;
  }
}
