/** Docs – Content **/ .docs{

&__content{
    width:100%;
    @include media-min($sm){
        max-width:calc(100% - 288px);
        margin:0 0 0 48px;
    }
    @include media-min($lg){
        max-width:calc(100% - 348px);
    }
    @include media-min($xxl){
        max-width:680px;
        margin:0 64px 0 72px;
    }
    h1{
        margin:.25em 0 .5em 0;
        color:$black;
        font-weight:600;
        font-size:1.5em;
        @include media-min($sm){
            font-size:1.77em;
        }
    }
    h2{
        margin:2em 0 .5em 0;
        color:rgba($black,.6);
        font-weight:600;
        font-size:1.3125em;
        line-height:135%;
        @include media-min($sm){
            font-size:1.33em;
        }
        &:first-of-type{
            margin-top:1em;
        }
    }
    h3{
        margin:2em 0 .5em 0;
        font-weight:600;
        @include media-min($sm){
            font-size:1.166em;
        }
    }
    p, li{
        @include media-min($sm){
            font-size:16px;
            line-height:28px;
        }
        a:not(.docs__pagination-item){
            color:$blue;
            font-weight:600;
            text-decoration:none;
            &:hover{
                text-decoration: underline;
            }
        }
    }
    pre, code{
        @include media-min($sm){
            font-size:16px;
            line-height:28px;
        }
    }
    p:not(.alert__content){
        margin:0 0 1em 0;
    }
    ul{
        margin:24px 0;
        padding:0 0 0 36px;
        list-style-type:none;
        li{
            margin:.1em 0;
        }
        li::before{
            @include material-icons(24px);
            margin:0 6px 0 -30px;
            color:rgba($black,.38);
            vertical-align:middle;
            content:"chevron_right";
        }
    }
    pre{
        margin:24px 0;
    }
    img{
        max-width:100%;
        height:auto;
        margin:1em 0 0 0;
        border-radius:8px;
    }
    code{
        font-family:$codeFont;
    }
}

}

/** Dark mode styles **/ body.dark-mode .docs{

&__content{
    p, li, pre, code{
        a:not(.docs__pagination-item){
            color:$yellow;
        }
    }
    ul{
        li::before{
            color:rgba($white,.38);
        }
    }
}

}