// classic sidebar styles
.classic-sidebar{
    width: $sidebar-width;
    background: white;
    @include shadow(1);
    
    @media screen and (max-width: $sidebarcollapse){
        width: 100%;
        margin-bottom: $margin-width;
    }
}

.has-classic-sidebar-left{   
    .margin{
        .content{
            @include flexbox(row-reverse, wrap, space-between, flex-start);
            .content-container,
            .articles{
                $subs: $margin-width + $sidebar-width;
                width: calc(100% - #{$subs});
            }

            @media screen and (max-width: $sidebarcollapse){
                @include flexbox(column, wrap, flex-start, center);
                .content-container,
                .articles{
                    width: 100%;
                    margin-bottom: $margin-width;
                }
            }
        }
    }
}
.has-classic-sidebar-right{
    .margin{
        .content{
            @include flexbox(row, wrap, space-between, flex-start);
            .content-container,
            .articles{
                $subs: $margin-width + $sidebar-width;
                width: calc(100% - #{$subs});
            }

            @media screen and (max-width: $sidebarcollapse){
                @include flexbox(column, wrap, flex-start, center);
                .content-container,
                .articles{
                    width: 100%;
                    margin-bottom: $margin-width;
                }
            }
        }    
    }
}

// material sidebar styles
.material-sidebar {
    width: $sidebar-width;
    height: 100%;
    position: fixed;
    top: 0;
    background: white;
    z-index: 111;
    overflow-y: auto;
    @include shadow(1);
    transition: .3s all ease;
    
    .row{
        padding: 20px;
        border-bottom: $line;
        
        .ts-no-slogan,
        .ts-icon{
            display: none;
        }
    }
    .sidebar-toggle {
        display: none;
        transition: .5s all ease;
    }
    @media screen and (max-width: $sidebarcollapse) {
        transform: translateX(-($sidebar-width - $margin-width));
        &.open {
            transition-delay: .5s;
            transform: translateX(0);
            .sidebar-toggle {
                transition-delay: .3s;
                height: $margin-width;
                background: rgba($material-sidebar-responsive-border-bg, 0);
                i {
                    transform: translate(50%, -50%) rotate(45deg);
                }
            }
        }
        .sidebar-toggle {
            display: block;
            position: fixed;
            top: 0;
            left: $sidebar-width - $margin-width;
            width: $margin-width;
            height: 100%;
            background: $material-sidebar-responsive-border-bg;
            &:hover {
                cursor: pointer;
                background: darken($material-sidebar-responsive-border-bg, 7%);
            }
            i {
                transition: 1s all ease;
                position: absolute;
                right: $margin-width/2;
                top: 50%;
                transform: translate(50%, -50%);
            }
        }
    }
}

.has-material-sidebar-left,
.has-material-sidebar-right{
    &,
    .main-menu {
        width: calc(100% - #{$sidebar-width});
        @media screen and (max-width: $sidebarcollapse) {
            width: calc(100% - #{$margin-width});
        }
    }
}

.has-material-sidebar-left {
    margin-left: $sidebar-width;
    .main-menu {
        margin-left: $sidebar-width;
    }
    .material-sidebar {
        left: 0;
    }
    @media screen and (max-width: $sidebarcollapse) {
        margin-left: $margin-width;
        .main-menu {
            margin-left: $margin-width;
        }
    }
}

.has-material-sidebar-right {
    margin-right: $sidebar-width;
    .main-menu {
        margin-right: $sidebar-width;
    }
    .material-sidebar {
        right: 0;
    }
    @media screen and (max-width: $sidebarcollapse) {
        margin-right: $margin-width;
        .main-menu {
            margin-right: $margin-width;
        }
    }
}
