// =============================================================================
// Typography
// =============================================================================
@margin-base: 5px;

// Font rendering
// ----------------------------------------
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

// Headings
// ----------------------------------------
h1, h2, h3, h4, h5, h6 {
    text-rendering: geometricPrecision;

    @media (min-width: @screen-lg-min) {
        .has_code_col .doc-aside &{
            color: white;
        }
    }
}

.headings-margin-small () {
    > h2, > h3, > h4, > h5, > h6 {
        margin-top: @margin-base*2;
    }
}
.headings-bordered () {
    padding-bottom: @margin-base;
    border-bottom: 2px solid #f4f6f7;
}

article.doc-body {

    // Vertical rhythm
    > section {
        padding-bottom: @margin-base*2;

        > :last-child {
            margin-bottom: 0;
        }

        > h2, > h3, > h4, > h5, > h6 {
            margin-bottom: @margin-base;
            margin-top: @margin-base*8;

            &:last-child {
                margin-bottom: -@margin-base*6;
                .headings-bordered();
            }
        }

        > h2 {
            .headings-bordered();
        }

        > h5, > h6 {
            font-weight: 500;
        }

        &:first-of-type {
            .headings-margin-small();

            &:empty, &.hidden {
                display: none;

                + section {
                    .headings-margin-small();
                }
            }
        }
    }

    // Typography components
    > section {
        line-height: 26px;
    }

    a, a:hover {
        text-decoration: underline;
    }

	blockquote {
		font-size: 15px;
		line-height: 26px;
		&:not(:first-child) {
			margin-top: 17px;
		}
	}

	dl {
        dt code {
            font-size: 0.9em;
        }

        dd {
            margin: 2px 0 @grid-gutter-width/2 @grid-gutter-width/2;
        }
	}

    ol, ul {
        line-height: 26px;
        padding: 0;
        list-style: none;
        counter-reset: a;

        li {
            margin: 5px 0;
            position: relative;
            padding-left: 30px;

            &:before {
                content: "";
                display: block;
                .o-position-absolute(9px, @left: 10px);
                .square(6px);
                border-radius: 50%;
                background: #939da3;
            }

            p {
                margin: 0;
            }

            h2, h3, h4, h5, h6 {
                margin-top: 0;
                padding-top: 0;
            }
        }
    }

    ol > li:before {
        counter-increment: a;
        content: counter(a);
        color: #fff;
        font-size: 13px;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        padding: 4px 0;
        .square(20px);
        border-radius: 10px;
        .o-position-absolute(3px, @left: 0);
    }


    .o_has_permalink_marker {
        transition: all, 0.3s;
        padding-left: 0;

        i {
            cursor: pointer;
            visibility: hidden;
            margin-left: 0.1em;
            font-size: 0.8em;
            padding: 0.2em;
            .rotate(-45deg);
        }

        &:hover {
            i {
                visibility: visible;
            }
        }

        &.o_marked {
            padding-left: 10px;
            background-color: #fff7d1;
        }
    }
}