/*
  TYPOGRAPHY
  ----------

  Includes typographic resets for many common elements, and a few helper classes.
   - Headers
   - Subheaders
   - Lead paragraphs
   - Ordered/unordered lists
   - Code samples
   - Anchors
   - Dividers
   - Blockquotes
   - Acronyms
*/
////
/// @group typography
////

// Typography
// We use these to control header font styles
/// @type String | List
$header-font-family: $body-font-family !default;
/// @type Keyword
$header-font-weight: $font-weight-normal !default;
/// @type Keyword
$header-font-style: $font-weight-normal !default;
/// @type Color
$header-font-color: #222 !default;
/// @type Number
$header-line-height: 1.4 !default;
/// @type Number
$header-top-margin: .2rem !default;
/// @type Number
$header-bottom-margin: .5rem !default;
/// @type Keyword
$header-text-rendering: optimizeLegibility !default;

// We use these to control header font sizes
$h1-font-size: rem-calc(44) !default;
/// @type Number
$h2-font-size: rem-calc(37) !default;
/// @type Number
$h3-font-size: rem-calc(27) !default;
/// @type Number
$h4-font-size: rem-calc(23) !default;
/// @type Number
$h5-font-size: rem-calc(18) !default;
/// @type Number
$h6-font-size: 1rem !default;

// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
/// @type Number
$h2-font-reduction: rem-calc(10) !default;
/// @type Number
$h3-font-reduction: rem-calc(5) !default;
/// @type Number
$h4-font-reduction: rem-calc(5) !default;
/// @type Number
$h5-font-reduction: 0 !default;
/// @type Number
$h6-font-reduction: 0 !default;

// These control how subheaders are styled.
/// @type Number
$subheader-line-height: 1.4 !default;
/// @type Color
$subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;
/// @type Keyword
$subheader-font-weight: $font-weight-normal !default;
/// @type Number
$subheader-top-margin: .2rem !default;
/// @type Number
$subheader-bottom-margin: .5rem !default;

// A general <small> styling
/// @type Number
$small-font-size: 60% !default;
/// @type Color
$small-font-color: scale-color($header-font-color, $lightness: 35%) !default;

// We use these to style paragraphs
/// @type Keyword | List
$paragraph-font-family: inherit !default;
/// @type Keyword
$paragraph-font-weight: $font-weight-normal !default;
/// @type Number
$paragraph-font-size: 1rem !default;
/// @type Number
$paragraph-line-height: 1.6 !default;
/// @type Number
$paragraph-margin-bottom: rem-calc(20) !default;
/// @type Number
$paragraph-aside-font-size: rem-calc(14) !default;
/// @type Number
$paragraph-aside-line-height: 1.35 !default;
/// @type Keyword
$paragraph-aside-font-style: italic !default;
/// @type Keyword
$paragraph-text-rendering: optimizeLegibility !default;

// We use these to style <code> tags
/// @type Color
$code-color: grayscale($primary-color) !default;
/// @type String | List
$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
/// @type Keyword
$code-font-weight: $font-weight-normal !default;
/// @type Color
$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
/// @type Number
$code-border-size: 1px !default;
/// @type Keyword
$code-border-style: solid !default;
/// @type Color
$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
/// @type Number
$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;

// We use these to style anchors
/// @type Keyword
$anchor-text-decoration: none !default;
/// @type Keyword
$anchor-text-decoration-hover: none !default;
/// @type Color
$anchor-font-color: $primary-color !default;
/// @type Color
$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;

// We use these to style the <hr> element
/// @type Number
$hr-border-width: 1px !default;
/// @type Keyword
$hr-border-style: solid !default;
/// @type Color
$hr-border-color: #ddd !default;
/// @type Number
$hr-margin: rem-calc(20) !default;

// We use these to style lists
/// @type String | List
$list-font-family: $paragraph-font-family !default;
/// @type Number
$list-font-size: $paragraph-font-size !default;
/// @type Number
$list-line-height: $paragraph-line-height !default;
/// @type Number
$list-margin-bottom: $paragraph-margin-bottom !default;
/// @type Keyword
$list-style-position: outside !default;
/// @type Number
$list-side-margin: 1.1rem !default;
/// @type Number
$list-ordered-side-margin: 1.4rem !default;
/// @type Number
$list-side-margin-no-bullet: 0 !default;
/// @type Number
$list-nested-margin: rem-calc(20) !default;
/// @type Keyword
$definition-list-header-weight: $font-weight-bold !default;
/// @type Number
$definition-list-header-margin-bottom: .3rem !default;
/// @type Number
$definition-list-margin-bottom: rem-calc(12) !default;

// We use these to style blockquotes
/// @type Color
$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;
/// @type Number
$blockquote-padding: rem-calc(9 20 0 19) !default;
/// @type Color
$blockquote-border: 1px solid #ddd !default;
/// @type Number
$blockquote-cite-font-size: rem-calc(13) !default;
/// @type Color
$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;
/// @type Color
$blockquote-cite-link-color: $blockquote-cite-font-color !default;

// Acronym styles
/// @type Color
$acronym-underline: 1px dotted #ddd !default;
///

@mixin lead {
  font-size: $paragraph-font-size + rem-calc(3.5);
  line-height: 1.6;
}

@mixin subheader {
  line-height: $subheader-line-height;
  color: $subheader-font-color;
  font-weight: $subheader-font-weight;
  margin-top: $subheader-top-margin;
  margin-bottom: $subheader-bottom-margin;
}

@include exports(typography) {
  /* Typography resets */
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  form,
  p,
  blockquote,
  th,
  td {
    margin:0;
    padding:0;
  }

  /* Default Link Styles */
  a {
    color: $anchor-font-color;
    text-decoration: $anchor-text-decoration;
    line-height: inherit;

    &[ui-sref] {
      cursor: pointer;
    }

    &:hover,
    &:focus {
      color: $anchor-font-color-hover;
      @if $anchor-text-decoration-hover != $anchor-text-decoration {
      	text-decoration: $anchor-text-decoration-hover;
      }
    }

    img { border:none; }
  }

  /* Default paragraph styles */
  p {
    font-family: $paragraph-font-family;
    font-weight: $paragraph-font-weight;
    font-size: $paragraph-font-size;
    line-height: $paragraph-line-height;
    margin-bottom: $paragraph-margin-bottom;
    text-rendering: $paragraph-text-rendering;

    &.lead { @include lead; }

    & aside {
      font-size: $paragraph-aside-font-size;
      line-height: $paragraph-aside-line-height;
      font-style: $paragraph-aside-font-style;
    }
  }

  /* Default header styles */
  h1, h2, h3, h4, h5, h6 {
    font-family: $header-font-family;
    font-weight: $header-font-weight;
    font-style: $header-font-style;
    color: $header-font-color;
    text-rendering: $header-text-rendering;
    margin-top: $header-top-margin;
    margin-bottom: $header-bottom-margin;
    line-height: $header-line-height;

    small {
      font-size: $small-font-size;
      color: $small-font-color;
      line-height: 0;
    }
  }

  h1 { font-size: $h1-font-size - $h1-font-reduction; }
  h2 { font-size: $h2-font-size - $h2-font-reduction; }
  h3 { font-size: $h3-font-size - $h3-font-reduction; }
  h4 { font-size: $h4-font-size - $h4-font-reduction; }
  h5 { font-size: $h5-font-size - $h5-font-reduction; }
  h6 { font-size: $h6-font-size - $h6-font-reduction; }

  .subheader { @include subheader; }

  hr {
    border: $hr-border-style $hr-border-color;
    border-width: $hr-border-width 0 0;
    clear: both;
    margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
    height: 0;
  }

  /* Helpful Typography Defaults */
  em,
  i {
    font-style: italic;
    line-height: inherit;
  }

  strong,
  b {
    font-weight: $font-weight-bold;
    line-height: inherit;
  }

  small {
    font-size: $small-font-size;
    color: $small-font-color;
    line-height: inherit;
  }

  code {
    font-family: $code-font-family;
    font-weight: $code-font-weight;
    color: $code-color;
    background-color: $code-background-color;
    border-width: $code-border-size;
    border-style: $code-border-style;
    border-color: $code-border-color;
    padding: $code-padding;
  }

  /* Lists */
  ul,
  ol,
  dl {
    font-size: $list-font-size;
    line-height: $list-line-height;
    margin-bottom: $list-margin-bottom;
    list-style-position: $list-style-position;
    font-family: $list-font-family;
  }

  /* Lists */
  ul, ol {
    margin-left: $list-side-margin;
    li {
      ul,
      ol {
        margin-left: $list-nested-margin;
        margin-bottom: 0;
      }
    }
  }

  /* Lists without bullets */
  ul.no-bullet {
    &, li ul, li ol {
      list-style-type: none;
    }
    margin-left: $list-side-margin-no-bullet;
  }

  /* Definition Lists */
  dl {
    dt {
      margin-bottom: $definition-list-header-margin-bottom;
      font-weight: $definition-list-header-weight;
    }
    dd { margin-bottom: $definition-list-margin-bottom; }
  }

  /* Abbreviations */
  abbr,
  acronym {
    text-transform: uppercase;
    font-size: 90%;
    color: $body-font-color;
    border-bottom: $acronym-underline;
    cursor: help;
  }
  abbr {
    text-transform: none;
  }

  /* Blockquotes */
  blockquote {
    margin: 0 0 $paragraph-margin-bottom;
    padding: $blockquote-padding;
    border-left: $blockquote-border;

    cite {
      display: block;
      font-size: $blockquote-cite-font-size;
      color: $blockquote-cite-font-color;
      &:before {
        content: "\2014 \0020";
      }

      a,
      a:visited {
        color: $blockquote-cite-link-color;
      }
    }
  }
  blockquote,
  blockquote p {
    line-height: $paragraph-line-height;
    color: $blockquote-font-color;
  }

  @include breakpoint(medium) {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
  }
}