@if $establish-type-rules {
  // @page Pattern Library/Typography
  // @name Headings
  //
  // @description
  //   The default heading styling across all uSwitch pages.
  //   We allow extending the sizes of these headings with `%heading-{$i}` so that we don't repeat similar font sizes across the site
  //
  // @markup
  //  <h1>Heading 1</h1>
  //  <h2>Heading 2</h2>
  //  <h3>Heading 3</h3>
  //  <h4>Heading 4</h4>
  //  <h5>Heading 5</h5>
  //  <h6>Heading 6</h6>

  html {
    @include normal-font;
    font-size: $base-font-size;
    line-height: $base-line-ratio + em;
  }

  body {
    color: $c-typegrey;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: .375em;
  }

  @for $level from 1 through 6 {
    h#{$level},
    %heading-#{$level},
    .us-heading--#{$level} {
      @include heading($level);
    }
  }

  // @page Pattern Library/Typography
  // @name Paragraphs
  //
  // @description
  //   Default paragraph styling with a margin bottom.
  //
  // @state .us-standfirst - Used for heros and introductory paragraphs
  //
  // @markup
  //   <p class="{$modifiers}">
  //     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.
  //     Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.
  //     Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.
  //   </p>

  p,
  .trailered {
    margin: 0 0 1.5em 0;
  }

  .us-standfirst {
    @include baseline(18px);
  }

  // @page Pattern Library/Typography
  // @name Lists
  //
  // @description
  //   Normal list styling
  //
  // @markup
  //   <ul>
  //     <li>List item 1</li>
  //     <li>List item 2</li>
  //     <li>List item 3</li>
  //   </ul>

  ul {
    li {
      margin-bottom: .5em;
    }
  }

  small {
    line-height: 1.15em;
  }

  %small-font {
    font-size: em(14px);
    line-height: 1.15em;
  }

  // @page Pattern Library/Typography
  // @name Blockquote
  //
  // @description
  //   Default blockquote
  //
  // @markup
  //   <blockquote>
  //     <p>
  //       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  //       Aenean vel arcu non magna varius sagittis vel at elit.
  //       Vivamus et orci pretium, commodo eros vitae, tincidunt purus.
  //     </p>
  //   </blockquote>

  blockquote {
    @include italic-font;
    padding: $gutter-width / 2;
    color: $c-navy;
    border-left: 5px solid $c-bordergrey;

    > p {
      padding: 0 !important;
      margin: 0 !important;
    }
  }
}