$content-bullet-color: $primary !default;
$content-bullet-top: 0.875rem !default;

$content-link-color: $primary !default;

$content-h1-size: $size-3 !default;
$content-h2-size: $size-4 !default;
$content-h3-size: $size-5 !default;

$content-block-margin: 1em !default;
$content-p-line-height: inherit !default;

.content {
    &:after {
        clear: both;
        content: "";
        display: table;
    }

    figure {
        margin: 0;
        padding: 0;
        text-align: left;
    }

    p,
    dl,
    ol,
    ul,
    pre,
    table,
    blockquote,
    .iframe-wrap {
        &:not(:last-child) {
            margin-bottom: $content-block-margin;
        }
    }

    p {
        line-height: $content-p-line-height;
    }

    a:not(.button) {
        color: $content-link-color;
        text-decoration: underline;

        &:hover {
            text-decoration: none;
        }
    }

    .title {
        color: $title-color;
        font-size: $title-size;
        font-weight: $title-weight;
    }

    .subtitle {
        color: $subtitle-color;
        font-size: $subtitle-size;
        font-weight: $subtitle-weight;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        &:not(.title):not(.subtitle) {
            font-weight: $weight-semibold;

            a {
                color: $text !important;
                text-decoration: none !important;

                &:hover {
                    color: $content-link-color !important;
                }
            }
        }

        &.title,
        &.subtitle {
            margin-top: inherit;
        }
    }

    h1 {
        &:not(.title):not(.subtitle) {
            font-size: $content-h1-size;
        }
    }

    h2 {
        &:not(.title):not(.subtitle) {
            font-size: $content-h2-size;
        }
    }

    h3 {
        &:not(.title):not(.subtitle) {
            font-size: $content-h3-size;
        }
    }

    h4,
    h5,
    h6 {
        &:not(.title):not(.subtitle) {
            font-size: 1em;
        }
    }

    blockquote {
        padding: 1.25em 1.5em;
        background-color: $background;
        border-left: 5px solid $primary;
    }

    ul {
        margin-top: 0;
        margin-left: 0;
        list-style: none outside;

        &:not(:first-child) {
            margin-top: $content-block-margin;
        }

        > li {
            padding-left: 3em;
            padding-top: .25em;
            padding-bottom: .25em;
            position: relative;

            &:before {
                top: $content-bullet-top;
                width: 5px;
                left: 1.75em;
                height: 5px;
                content: '';
                border-radius: 50%;
                position: absolute;
                background-color: $content-bullet-color;
                border: solid 1px $content-bullet-color;
            }
        }

        ul {
            margin-top: 0.5em;

            > li {
                &:before {
                    background-color: transparent;
                }
            }

            ul li:before {
                border-radius: 0;
            }
        }
    }

    ol {
        margin-top: 0;
        margin-left: 0;
        counter-reset: item;
        list-style: none outside;

        &:not(:first-child) {
            margin-top: $content-block-margin;
        }

        > li {
            padding-left: 3em;
            padding-top: .25em;
            padding-bottom: .25em;
            position: relative;

            &:before {
                top: .25em;
                left: 1.75em;
                position: absolute;
                content: counters(item, ".") " ";
                counter-increment: item;
            }
        }

        ol {
            margin-top: 0.5em;

            > li {
                &:before {
                    left: 0.75em;
                }
            }

            ol li:before {
                left: 0;
            }
        }
    }

    img {
        float: none !important;
        height: auto !important;

        &.is-centered {
            display: block;
            margin-left: auto;
            margin-right: auto;
            float: none !important;
        }

        @include until($tablet) {
            &.is-left,
            &.is-right {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
        }

        @include tablet {
            &.is-left,
            &.is-right {
                max-width: 50%;
                margin-bottom: $content-block-margin;
            }

            &.is-left {
                float: left !important;
                margin-right: $content-block-margin;
            }

            &.is-right {
                float: right !important;
                margin-left: $content-block-margin;
            }
        }
    }
}