h1
    font-size: 2.5em
    font-weight: 400
    margin: 1.5em 0

h2
    font-size: 2em
    font-weight: 400
    margin: 1.25em 0

h3
    font-size: 1.75em
    font-weight: 400
    margin: 1em 0

h4
    font-size: 1.5em
    font-weight: 400
    margin: 0.8em 0

h5
    font-size: 1.25em
    font-weight: 400
    margin: 0.5em 0

h6
    font-size: 1em
    font-weight: 500
    margin: 0.25em 0

h1.title,
h2.title,
h3.title,
h4.title,
h5.title,
h6.title
    padding-bottom: .3em
    border-bottom: 1px solid $grey
    @include bottom-margin()

a
    color: $link
    text-decoration: none

    &:hover,
    &:focus
       color: darken($link, 5)
       text-decoration: none

blockquote
    padding: 2px 10px
    margin: 10px 0
    font-size: 16px
    border-left: 4px solid $grey

.disabled
    color: $disabled
    cursor: not-allowed

.color
    @each $state, $color-map in $-states-map
        $color: map-get($color-map, "text-color")
        $color-state: map-get($color-map, "color-state")

        &.#{$state}
            color: $color-state

b,
bold,
strong
    font-weight: 500

mark,
marker,
highlight
    padding: 2px
    color: black
    background-color: yellow

code
    padding: 1px 8px 2px
    font-family: $font-code
    background-color: $light

    @include inline-block()
    @include border-radius()

pre
    overflow: scroll
    border: 1px solid darken($light, 5)
    background-color: $light
    font-family: $font-code
    padding: $padding-medium

    @include bottom-margin()
    @include border-radius()

pre::-webkit-scrollbar
    display: none

em,
.italic
    font-style: italic

p
    @include bottom-margin()

small,
.sml
    font-size: 80%

s,
.strike,
.strikethrough
    text-decoration: line-through

sub,
sup
    position: relative
    font-size: 75%
    line-height: 0
    vertical-align: baseline