*, *::after, *::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

/* ===========================================================================================
Docs Body & Page Structure
============================================================================================== */

html, body {
    height: 100%;
    background-color: #fff;
    color: var(--text);
}

.Columns {
    &__left {
        background-color: var(--sidebar-background);
    }

    &__right {
        &__content {
            padding: 10px;
            background-color: #fff;
        }
    }
}

.Collapsible {
    //mobile friendly sub-nav
    &__content {
        display: none;
    }

    &__trigger {
        margin: 12px;
        padding: 7px 10px;
        background-color: transparent;
        border: none;
        float: right;

        @include kill-background-image;
        @include kill-box-shadow;

        &--bar {
            display: block;
            width: 18px;
            height: 2px;
            margin-top: 2px;
            margin-bottom: 3px;
            background-color: var(--light);
            @include kill-box-shadow;
        }

        &:hover {
            background-color: var(--sidebar-hover);
            @include kill-box-shadow;

            .Collapsible__trigger--bar {
                background-color: var(--dark);
                @include kill-box-shadow;
            }
        }
    }
}

@media screen and (min-width: 768px) {
    body {
        //Needed only for floating code blocks
        background-color: var(--light);
    }

    .Navbar {
        position: fixed;
        z-index: 1030;
        width: 100%;
    }

    .Collapsible {
        &__trigger {
            display: none !important;
        }

        &__content {
            display: block !important;
        }
    }

    .Columns {
        height: 100%;

        &::after,
        &::before {
            content: " ";
            display: table;
        }

        &::after {
            clear: both;
        }

        &__left, &__right {
            position: relative;
            min-height: 1px;
            float: left;
            overflow: auto;
            height: 100%;
        }

        &__left {
            width: 25%;
            border-right: 1px solid var(--lines);
            overflow-x: hidden;
        }

        &__right {
            width: 75%;

            &__content {
                padding: 0 20px 20px;
                min-height: 100%;
            }
        }
    }
}