/**
 * Static article page
 * Uses in Platform documentation
 */
.article {
    position: relative;
    max-width: 600px;
    margin: 80px auto;
    padding: 15px;
    font-size: 16.8px;
    line-height: 1.5em;

    /**
     * Hawk.so header
     * =================
     */
    &__header {
        margin-bottom: 80px;

        &-title {
            font-size: 53px;
            font-weight: 800;
            line-height: 1.4em;
        }

        &-caption {
            font-size: 24px;
            color: var(--grayText);
        }
    }

    /**
     * Navigation
     * =================
     */
    &__navigation {
        position: sticky;
        top: 30px;
        font-size: 15px;

        &-content {
            position: absolute;
            top: 0;
            left: -300px;

            @media all and (max-width: 1250px) {
                left: -220px;
            }
        }

        @media all and (max-width: 1100px) {
            position: static;
            margin: -30px 0 60px;

            &-content {
                position: static;
            }
        }

        a {
            display: block;
            border-bottom: 1px solid color(var(--linkColor) alpha(20%)) !important;
        }

        .second {
            margin-left: 2em;
        }
    }

    /**
     * Article content
     * =================
     */
    h1 {
        font-weight: 800;
        margin-bottom: 1em;
        line-height: 1.1em;
    }

    h2 {
        margin-top: 2em;
        font-weight: 800;
    }

    h3 {
        margin: 1.3em 0 0.5em;
    }

    a {
        color: var(--linkColor);
        border-bottom: 1px solid color(var(--linkColor) alpha(50%));
        cursor: pointer;

        &:hover {
            color: var(--hoverColor);
            border-bottom-color: color(var(--hoverColor) alpha(50%));
        }
    }

    pre {
        @media (--mobile) {
            white-space: pre-line;
        }
    }

    abbr {
        display: inline-block;
        background: color(var(--pinkColor) alpha(7%));
        padding: 0 7px;
        margin-right: 0.2em;
        border-radius: 2px;
        color: var(--pinkColor);
        text-decoration: none;
        font-size: 0.9em;
    }

    ul,
    ol {
        li {
            margin: 0.6em 0;
            list-style-position: inside;
        }
    }

    ul li {
        list-style-type: disc;
    }

    ol li {
        list-style-type: decimal;
    }

    code {
        color: #888;
    }
}
