_typography.scss

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

@mixin set-site-font-family() {
  font-family: $site-font-family;
  letter-spacing: -0.0027777778rem;
}

@mixin heading-1() {
  font-size: $xxl-font-size-mobile;

  @media #{$mq-tablet-and-up} {
    font-size: $xxl-font-size;
  }
}

@mixin heading-2() {
  font-size: $xl-font-size-mobile;

  @media #{$mq-tablet-and-up} {
    font-size: $xl-font-size;
  }
}

@mixin heading-3() {
  font-size: $large-font-size-mobile;

  @media #{$mq-tablet-and-up} {
    font-size: $large-font-size;
  }
}

@mixin heading-4() {
  font-size: $medium-font-size-mobile;

  @media #{$mq-tablet-and-up} {
    font-size: $medium-font-size;
  }
}

@mixin heading-5() {
  font-size: $small-medium-font-size-mobile;

  @media #{$mq-tablet-and-up} {
    font-size: $small-medium-font-size;
  }
}

@mixin blockquote() {
  @include readable-line-length();
  font-size: $small-medium-font-size-mobile;

  @media #{$mq-tablet-and-up} {
    font-size: $small-medium-font-size;
  }
}

@mixin font-smoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin slab-highlight() {
  background-color: $neutral-100;
  color: $text-color-inverted;
  font-family: $heading-font-family;
  font-weight: normal;
  max-width: max-content;
  padding: 0 $base-unit;
}