/* ---------------------------------------------------------------------- */
/*  Sidebar
/* ---------------------------------------------------------------------- */

#sidebar {
    width: $sideBar-width;
    float: left;
    left: 0;
    bottom: 0;
    background: lighten($grey, 18%);
    overflow: visible;
    z-index: 1051;

    > div, .sidebar-container {
        height: 100%;
    }

    .app-sidebar-fixed & {
        > .sidebar-container {
            overflow-y: hidden;
            overflow-x: visible;
            position: relative;
        }
    }

    .app-mobile & {
        overflow: auto;
    }

    .wrapper {
        padding: 20px 15px;
    }

    .app-navbar-fixed.app-sidebar-fixed & {
        top: 0;
    }

    nav {
        min-height: 100%;
    }

    @media (min-width: $screen-md-min) {
        margin-top: $header-height;

        &:before {
            @media (min-width: $screen-md-min) {
                background-color: inherit;
                border: inherit;
                bottom: 0;
                content: "";
                position: absolute;
                top: 0;
                width: inherit;
                z-index: -1;
                border-right: 1px solid $border-default;
            }
        }

        nav {
            border-right: 1px solid $border-default;
        }

        .app-navbar-fixed & {
            margin-top: 0;
        }

        .app-sidebar-fixed & {
            position: fixed;
            top: $header-height !important;
            margin-top: 0;
        }

        .app-sidebar-closed & {
            width: $sideBar-closed-width;
        }
    }

    @media (max-width: $screen-sm-max) {
        position: fixed !important;
        top: 0;
        left: 0;
        z-index: 0;
        float: none;
        -webkit-transform: translate3d(-$sideBar-width, 0, 0);
        transform: translate3d(-$sideBar-width, 0, 0);
        @include transition(transform 300ms ease 0s);

        .app-slide-off & {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            @include transition(transform 300ms ease 0s);
        }

        nav {
            border-right: none !important;
        }

        > .sidebar-container {
            overflow-y: hidden;
            overflow-x: visible;
            position: relative;
        }
    }
}