/* ==========================================================================
   Atlas layout

   Extra styling for responsive layouts
========================================================================== */
.layout-atlas-responsive-default {
    $sidebar-width: 60px;

    @media (min-width: $screen-md) {
        .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
            width: $sidebar-width !important;

            .mx-scrollcontainer-wrapper > .mx-navigationtree ul li {
                &.mx-navigationtree-has-items:hover {
                    a {
                        background-color: $navsidebar-sub-bg;
                    }

                    ul {
                        position: absolute;
                        z-index: 100;
                        top: 0;
                        bottom: 0;
                        left: $sidebar-width;
                        display: block;
                        overflow-y: auto;
                        min-width: 200px;
                        padding-top: 10px;
                    }
                }

                &.mx-navigationtree-collapsed,
                &.mx-navigationtree-has-items {
                    ul {
                        display: none;
                    }
                }
            }
        }
    }


    .mx-scrollcontainer-slide {

        &.mx-scrollcontainer-open > .region-sidebar {
            width: $sidebar-width !important;
        }
    }

    // Push aside for mobile
    @media (max-width: $screen-sm-max) {
        .mx-scrollcontainer-open:not(.mx-scrollcontainer-slide) {
            width: 1100px;
        }

        .mx-scrollcontainer-slide .toggle-btn {
            display: inline-block !important;
        }
    }

    // Sidebar
    .region-sidebar {
        .toggle-btn {
            width: $sidebar-width;
            height: 60px;
            border-color: transparent;
            border-radius: 0;
            background: transparent;
        }

        .mx-scrollcontainer-wrapper > .mx-navigationtree {
            .navbar-inner > ul > li {
                & > a {
                    height: $sidebar-width;
                    // Glyph icon
                    .glyphicon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 40px;
                        height: 40px;
                        margin-left: -5px;
                        padding: 10px;
                        border-radius: 3px;
                    }

                    &.active {
                        .glyphicon {
                            background: $brand-primary;
                        }
                    }
                }
            }
        }
    }

    // Topbar
    .region-topbar {
    }
}

// Topbar variant
.layout-atlas-responsive-topbar {
    .mx-scrollcontainer-slide,
    .mx-scrollcontainer-push {
        &:not(.mx-scrollcontainer-open) > .region-sidebar {
            visibility: hidden;
        }
    }
}

// All responsive layouts
.layout-atlas-responsive-default,
.layout-atlas-responsive-topbar {
    // Topbar
    .region-topbar {
        .toggle-btn {
            display: none;

            @media (max-width: $screen-sm-max) {
                display: inline-block;
            }
        }
    }

    .mx-scrollcontainer-slide {
        &:not(.mx-scrollcontainer-open) > .region-sidebar {
            overflow: hidden;
        }

        &.mx-scrollcontainer-open > .region-sidebar {

            & > .mx-scrollcontainer-wrapper {
                position: relative;
            }
        }

        .region-sidebar > .mx-scrollcontainer-wrapper {
            z-index: 2;
            background-color: inherit;
        }
    }
}

// Fix Safari issue of sidebar disappearing
.profile-tablet {
    .mx-scrollcontainer:not(.mx-scrollcontainer-open) > .region-sidebar {
        overflow-y: hidden;

        .mx-scrollcontainer-wrapper {
            overflow: visible;
            }
    }
}