/***
 *  Type Scale mixins
 *
 *  Created using a modular scale. Factor is 1.4. This means, starting at a base
 *  of `20px`, the next size up (`h3`) is `20 * 1.4 = 28`. To simplify this, the
 *  math is handled by the [`modularScale`](#/utilities/functions/modularScale)
 *  function.
 *
 *  Additionally, `h4` splits between body and `h3`, while `small` is an
 *  arbitrary size.
 *
 *  scss:
 *    @include h1;
 *    @include h2;
 *    @include h3;
 *    @include h4;
 *    @include body;
 *    @include small;
 */
$base: pxToRem(20) !default;
$scale: 1.4 !default;
@mixin super () {
  @include h1;
  @include mq ($bp-medium) {
    font-size: modularScale($base, 5, $scale);
    line-height: multipleAbove(modularScale($base, 5, $scale));
  }
}
@mixin h1 () {
  font-size: modularScale($base, 4, $scale);
  line-height: multipleAbove(modularScale($base, 4, $scale));
}
@mixin h2 () {
  font-size: modularScale($base, 3, $scale);
  line-height: multipleAbove(modularScale($base, 3, $scale));
}
@mixin h3 () {
  font-size: modularScale($base, 2, $scale);
  line-height: multipleAbove(modularScale($base, 2, $scale));
}
@mixin h4 () {
  font-size: modularScale($base, 1.5, $scale);
  line-height: multipleAbove(modularScale($base, 1.5, $scale));
}
@mixin body () {
  font-size: $base;
  line-height: multipleAbove($base);
}
@mixin small () {
  font-size: pxToRem(14);
  line-height: multipleAbove(pxToRem(14));
}