@import "variables";
@import "base";
@import "mediaqueries";
@import "fonts";
@import "reset";
@import "keyframes";
@import "layouts";
@import "mixins";
@import "silents_class";

@import "components/menu";

.documentationpage {
    @include scroll((
        color: $c4
    ));
    @include font(100%, $f1);
    @include no-margins;
    @include no-border;
    @include bc($c1, $c3);

    article {
        border-bottom: $bd1;
        padding-bottom: 40px;
        margin-bottom: 30px;
    }

    .main_header {
        @include wh(100vw);
        padding: 35px min(2.08vw, 40px);

        .logo_sisass {
            @include ht;
            @include position;
            @include wh(
                nth($l1x, 1),
                nth($l1y, 1)
            );
            display: block;
        }
    }

    .main_content {
        padding: 0 min(10vw, 192px);
    }

    .container_menu {
        @include position(sticky, 26px);
        @include wh(100%, max-content);
    }

    .group_title {
        margin-bottom: 30px;
    }

    .title {
        @include font(szrem(42), $f3, 900);
        @include text;
        margin-bottom: 30px;
        color: $c5;
    }

    .subtitle {
        @include font(szrem(28), $f3, 900);
        @include text;
        margin-bottom: 5px;
        color: $c5;
    }

    .attribute {
        @include font(szrem(20), $f2, bold);
        @include text;
        margin-bottom: 3px;
        color: $c6;
    }

    .deprecated { color: $c5; }

    .description,
    p {
        @extend %text_1;
        margin-bottom: 15px;
    }

    .mb {
        margin-bottom: 25px;
    }

    .note {
        @extend %text_1;
        padding: min(5vw, 15px);
        border: $bd2;
        border-left: $bd3;
        margin-bottom: 15px;
    }

    .use {
        .title {
            @include font(szrem(28), $f2, bold);
            @include text;
            color: $c6;
            margin: {
                top: 45px;
                bottom: 10px;
            }
        }

        .subtitle {
            @include font(szrem(20), $f2, bold);
            @include text;
            color: lighten($c6, 20%);
            margin: {
                top: 30px;
                bottom: 10px;
            }
        }
    }

    .result {
        box-sizing: border-box;
        background-color: lighten($c3, 65%);
        border: $bd1;
        padding: 10px;
        display: block;
        margin: 10px 0;

        .box {
            @include whs(100px);
            background-color: $c5;
        }

        .box_no_bgc {
            @include whs(100px);
        }
    }

    .container_example {
        @include bc($c7, $c3);
        box-sizing: border-box;
        padding: 1px min(0.78vw, 15px) 15px;
    }

    code {
        @include font(szrem(16), $f1);
        padding: 10px 15px;
        display: block;
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }

    pre {
        @include border-radius(5%);
        margin-bottom: 40px;

        &:before { display: none; }
        &:after { display: none; }
    }
}