﻿//
.main-wrapper {
    width: 100%;
    height: 100%;
    padding-left: 240px;
}

//
.main-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 240px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: $color-base;
    white-space: nowrap;
    z-index: 3;
}

//
.main-content {
    height: 100%;
    width: 100%;

    .content-inner {
        padding: 30px;
    }
}

//
.sidebar-toggle {
    width: $sidebar-global-height;
    height: $sidebar-global-height;
    position: absolute;
    z-index: 1;
    padding: 0;
    cursor: pointer;
    border: none;
    background: none;
    display: none;
    outline: none !important;

    span {
        display: block;
        margin: 0 auto;
        height: 4px;
        width: 24px;
        margin-bottom: 4px;
        background-color: #666;
        @include border-radius(8px);

        &:last-child {
            margin-bottom: 0;
        }
    }

    @media screen and (max-width:640px) {
        width: $sidebar-global-height - 10px;
        height: $sidebar-global-height - 10px;
    }
}

//
.main-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.70);
    display: none;

    .sidebar-open & {
        display: block;
    }
}

// [RESPONSIVE]
@media screen and (min-width:1025px) {
    .sidebar-toggle,
    .main-overlay {
        display: none !important;
    }
}

@media screen and (max-width:1024px) {

    .main-wrapper {
        padding-left: 0;

        &.sidebar-open {
        }
    }

    .main-content {
        .content-inner {
            padding: 15px;
        }
    }

    .main-sidebar {
        display: none;

        .sidebar-open & {
            display: block;
        }
    }

    .sidebar-toggle {
        display: block;
    }
}

@media screen and (max-width:639px) {
    body {
        overflow-y: auto;
    }
}
