// ==========================================================================
// Typography
// ==========================================================================

body,
button,
input {
  @extend %font-open-sans-regular;
  @include setType($base-line-multi);
  color: $color-text--color;
}

// Remove text-shadow in selection highlight: h5bp.com/i
// These selection declarations have to be separate.
// Customize the background color to match your design.
::selection {
  color: $color-selection--color;
  background-color: $color-selection--background__color;
  text-shadow: none;
}

// Headings
h1,
%h1,
h2,
%h2,
h3,
%h3,
h4,
%h4 {
  @extend %font-open-sans-semibold;
  clear: both;
  margin: 0;
  padding: 0;
  color: $color-headings--color;
}

h1,
%h1 {
  @include setType(7, $ms-up2);
  margin-bottom: emRhythm(2, $ms-up3);

  @include breakpoint(s) {
    @include setType(10, $ms-up3);
  }
}

h2,
%h2 {
  @include setType(5, $ms-up1);
  margin-bottom: emRhythm(1, $ms-up2);

  @include breakpoint(s) {
    @include setType(8, $ms-up2);
  }
}

h3,
%h3 {
  @include setType(4);
  margin-bottom: emRhythm(1, $ms-up1);

  @include breakpoint(s) {
    @include setType(6, $ms-up1);
  }
}

h4,
%h4 {
  @include setType(4);
  margin-bottom: emRhythm(1);
}

p {
  margin: 0;
  margin-bottom: emRhythm($base-line-multi);
  word-wrap: break-word;
}

ul,
ol {
  margin: 0;
  padding: 0;
  margin-left: 1.5em;
  margin-bottom: emRhythm($base-line-multi);
}

.list-unstyled,
%list-unstyled {
  margin-left: 0;
  list-style: none;
}

.list-inline {
  @extend %list-unstyled;

  > li {
    display: inline-block;
    vertical-align: middle;
  }
}

// No bottom margins on last children
p,
ul,
ol,
blockquote,
pre {
  &:last-child {
    margin-bottom: 0;
  }
}

// No margins on nested elements
li {
  p,
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 0;
  }
}

// Font weights
b,
strong,
th {
  @extend %font-open-sans-semibold;
}

// Font styles
cite,
em,
i {
  @extend %font-open-sans-italic;
}

blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  margin-bottom: emRhythm($base-line-multi);
  padding: 2em 3em;
  background: $gray-darker;
  border-radius: 5px;
  text-align: right;
  color: $gray-lighter;
  text-shadow: 0 1px 0 $gray-darkest;

  &::before {
    @extend %font-open-sans-semibold;
    content: '\201C';
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: -1;
    font-size: 14em;
    color: #3c3c3c;
    text-shadow: none;
    line-height: 0.7;
  }

  code {
    padding: 0;
    color: $gray-lightest;
    background: none;
  }

  cite {
    @extend %font-open-sans-semibold;
    color: $gray-lightest;
    font-style: normal;

    a {
      color: inherit;

      &:hover {
        color: $white-dark;
      }

      &:focus {
        color: $white;
      }
    }
  }
}

pre {
  @extend %gray-box;
  overflow: auto;
  max-width: 100%;
  font-size: 75%;

  @include breakpoint(s) {
    font-size: 100%;
  }

  code {
    padding: 0;
  }
}

code {
  padding: 0.125em 0.33em;
  border-radius: 0.5em;
  background: $white-dark;
  color: $gray-dark;
  word-wrap: break-word;
  hyphens: auto;
}

small,
%small {
  font-size: 75%;
}

figure {
  margin: 0;
}

table {
  width: 100%;
  font-size: 75%;
  margin-bottom: emRhythm($base-line-multi);

  @include breakpoint(s) {
    font-size: 100%;
  }

  caption {
    @extend %small;
    margin-bottom: 0.25em;
  }

  caption,
  th {
    @extend %font-open-sans-semibold;
    text-align: left;
  }

  td,
  th {
    padding: 0.25em 0.5em;
  }

  thead {

    tr {
      background-color: $gray-lightest;
    }
  }

  tbody {

    tr {

      &:nth-child(odd) {
        background-color: $white-darker;
      }
    }
  }
}
