// heading() mixin
//
// Use the heading() mixin to add bundles of
// typographical styles to a selector
//
// Styleguide mixins.heading
@mixin heading($level) {
  margin: 0 0 1rem 0;
  color: $base-font-color;
  font-family: $base-font-family;
  font-size: $base-font-size;

  @if $level == h1 {
    color: $black;
    font-size: 2.125rem; // 34px
    font-weight: $weight-bold;
    line-height: 2.875rem; // 46px
  }

  @if $level == h2 {
    color: $gray-darkest;
    font-size: 1.625rem; // 26px
    font-weight: $weight-bold;
    line-height: 2.25rem; // 36px
    margin-top: 1.5rem;
  }

  @if $level == h3 {
    color: $black;
    font-size: 1.375rem; // 22px
    font-weight: $weight-bold;
    line-height: 2rem; // 32px
    margin-bottom: 0.5rem;
  }

  @if $level == h4 {
    color: $black;
    font-size: 1.5rem; // 24px
    font-weight: $weight-light;
    line-height: 2.125rem; // 34px
  }

  @if $level == h5 {
    color: $gray-darkest;
    font-size: 1.125rem; // 18px
    font-weight: $weight-bold;
    line-height: 1.625rem; // 26px
  }

  @if $level == 'para-xl' {
    font-size: 1.375rem; // 22px
    font-weight: $weight-book;
    line-height: 2rem; // 32px
    margin-bottom: 0.75rem; // 12px
  }

  @if $level == 'para-lg' {
    font-size: 1.125rem; // 18px
    font-weight: $weight-book;
    line-height: 1.6875rem; // 27px
    margin-bottom: 0.75rem; // 12px
  }

  @if $level == 'large-caps' {
    font-size: 0.8125rem; // 13px
    font-weight: $weight-book;
    letter-spacing: 1px;
    line-height: 1rem;
    margin-bottom: $base-padding-lite;
    padding-bottom: $base-padding-lite;
    text-transform: uppercase;
  }

  @if $level == 'para-md' {
    // font-size 16px
    font-weight: $weight-light;
    line-height: $base-line-height; // 22px
    margin-bottom: 0.625rem; // 10px
  }

  @if $level == 'para-sm' {
    font-size: 0.8125rem; // 13px
    font-weight: $weight-book;
    line-height: 1.1875rem; // 19px
    margin-bottom: 0.625rem; // 10px
  }
}


// font-size() mixin
//
// Use the font-size() to set a specific size to an element or class
// typographical styles to a selector
//
// Styleguide mixins.font-size

@mixin font-size($scale: 1) {
  font-size: ($scale * $base-font-multiplier * 10) + px;
  font-size: ($scale * $base-font-multiplier) + rem;
}
