/* ----------------------------
 *
 * Template Sidebar - screen-sm
 *
 * --------------------------- */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    /* Sidebar Transition  */
    .csstransforms3d.sidebar-open-ltr {
        .sidebar-left.sidebar-menu {
            .translate3d(@sidebar-width, 0, 0);
        }
    }
    .no-csstransforms3d.sidebar-open-ltr {
        .sidebar-left.sidebar-menu {
            left: @sidebar-width;
        }
    }
    .csstransforms3d.sidebar-open-rtl {
        .sidebar-left.sidebar-menu {
            .translate3d(-@sidebar-width, 0, 0);
        }
    }
    .no-csstransforms3d.sidebar-open-rtl {
        .sidebar-left.sidebar-menu {
            left: -@sidebar-width;
        }
    }

    /* Sidebar Main  */
    .sidebar {
        // sidebar left
        // -----------------------------------
        &.sidebar-left {
            &.sidebar-menu {
                position: absolute;
                left: 0px;
                padding-top: @header-height-md;
                bottom: auto;
                width: @sidebar-collapse-width;
                min-height: 100%;

                // sidebar left - viewport
                // -----------------------------------
                > .viewport {
                    overflow: visible !important;

                    > .content {
                        overflow: visible !important;
                    }
                    > .scrollbar,
                    > .scrollrail {
                        display: none !important;
                    }
                }
            }
        }

        // sidebar content
        // -----------------------------------
        .content {
            > .wrapper {
                display: none;
            }
            > .heading {
                display: none;
            }
        }

        // sidebar menu
        // -----------------------------------
        .topmenu {
            // Targetting 1st lvl menu
            // -----------------------------------
            > li {
                &:after {
                    left: 0px;
                }

                &.open {
                    > .submenu.collapsing,
                    > .submenu.collapse.in {
                        display: none;
                    }
                }

                &.hover,
                &.open.hover,
                &:hover,
                &.open:hover {
                    > .submenu.collapse,
                    > .submenu.collapsing,
                    > .submenu.collapse.in {
                        display: block;
                        height: auto !important;
                    }

                    // Arrow
                    // -----------------------------------
                    &.arrow:before {
                        position: absolute;
                        z-index: 1;
                        top: 50%;
                        right: 0px;
                        margin-top: -8px;
                        content: "";

                        width: 0px;
                        height: 0px;
                        border-style: solid;
                        border-width: 8px 8px 8px 0;
                        border-color: transparent darken(@sidebar-base-color, 4%) transparent transparent;

                        -webkit-box-shadow:inset 1px 0px 4px 0 darken(@sidebar-base-color, 5%);
                        box-shadow:inset 1px 0px 4px 0 darken(@sidebar-base-color, 5%);
                    }
                }

                &.active {
                    > a {
                        > .number {
                            .label,
                            .badge {
                                -webkit-box-shadow: 0px 0px 0px 2px lighten(@sidebar-base-color, 2%);
                                box-shadow: 0px 0px 0px 2px lighten(@sidebar-base-color, 2%);
                            }
                        }
                    }
                }

                // Menu link
                // -----------------------------------
                > a {
                    padding: 0px 15px;
                    line-height: @sidebar-collapse-width;

                    > .text {
                        display: none;
                    }
                    > .number {
                        display: block;
                        position: absolute;
                        top: 12px;
                        right: 10px;
                        width: auto;

                        .label,
                        .badge {
                            -webkit-box-shadow: 0px 0px 0px 2px @sidebar-base-color;
                            box-shadow: 0px 0px 0px 2px @sidebar-base-color;
                        }
                    }
                    > .arrow {
                        display: none;
                    }
                    > .figure {
                        display: block;
                        width: auto;
                        font-size: 18px;
                        padding: 0px;
                        text-align: center;
                    }
                }

                // Submenu - 2nd level
                // -----------------------------------
                > .submenu {
                    position: absolute;
                    left: @sidebar-collapse-width;
                    top: 0px;
                    width: @sidebar-width - 40;
                    padding-left: 0px;
                    padding-top: 2px;
                    padding-bottom: 2px;
                    border-top-right-radius: @border-radius;
                    border-bottom-right-radius: @border-radius;

                    &:after {
                        display: none;
                    }

                    > li {
                        // Header
                        // -----------------------------------
                        &.submenu-header {
                            display: block;
                            font-size: 15px;
                            color: lighten(@sidebar-base-color, 60%);
                            font-weight: 600;
                            padding-left: 15px;
                            padding-right: 15px;
                            padding-top: 10px;
                            padding-bottom: 5px;
                            margin-top: -2px;

                            &:after {
                                display: none;
                            }
                        }

                        &:after {
                            left: 15px;
                        }
                        > a {
                            padding-left: 35px;
                            padding-right: 15px;
                            padding-top: 1px;
                            padding-bottom: 1px;
                        }
                    }

                    // Submenu - 3rd level
                    // -----------------------------------
                    .submenu {
                        position: static;
                        padding-left: 20px;
                        background-color: darken(@sidebar-base-color, 8%);

                        > li {
                            > a {
                                padding-top: 1px;
                                padding-bottom: 1px;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ----------------------------
 *
 * Template Sidebar - screen-md
 *
 * --------------------------- */
@media (min-width: @screen-md-min) {
    /* Sidebar Transition  */
    .csstransforms3d.sidebar-open-ltr {
        .sidebar-left {
            &.sidebar-menu {
                .translate3d(@sidebar-width, 0, 0);
            }
        }
    }
    .no-csstransforms3d.sidebar-open-ltr {
        .sidebar-left {
            &.sidebar-menu {
                left: @sidebar-width;
            }
        }
    }
    .csstransforms3d.sidebar-open-rtl {
        .sidebar-left {
            &.sidebar-menu {
                .translate3d(-@sidebar-width, 0, 0);
            }
        }
    }
    .no-csstransforms3d.sidebar-open-rtl {
        .sidebar-left {
            &.sidebar-menu {
                left: -@sidebar-width;
            }
        }
    }

    /* Sidebar Main  */
    .sidebar {
        // sidebar left
        // -----------------------------------
        &.sidebar-left {
            &.sidebar-menu {
                position: absolute;
                left: 0px;
                padding-top: @header-height-md;
                bottom: auto;
                min-height: 100%;

                // sidebar viewport
                // -----------------------------------
                > .viewport {
                    overflow: visible !important;

                    > .content {
                        overflow: visible !important;
                    }
                    > .scrollbar,
                    > .scrollrail {
                        display: none !important;
                    }
                }
            }
        }
    }

    /* Sidebar minimized  */
    .sidebar-minimized {
        .sidebar {
            // sidebar left
            // -----------------------------------
            &.sidebar-left {
                &.sidebar-menu {
                    position: absolute;
                    left: 0px;
                    padding-top: @header-height-md;
                    bottom: auto;
                    width: @sidebar-collapse-width;
                    min-height: 100%;

                    // sidebar left - viewport
                    // -----------------------------------
                    > .viewport {
                        overflow: visible !important;

                        > .content {
                            overflow: visible !important;
                        }
                        > .scrollbar,
                        > .scrollrail {
                            display: none !important;
                        }
                    }
                }
            }

            // sidebar content
            // -----------------------------------
            .content {
                > .wrapper {
                    display: none;
                }
                > .heading {
                    display: none;
                }
            }

            // sidebar menu
            // -----------------------------------
            .topmenu {
                // Targetting 1st lvl menu
                // -----------------------------------
                > li {
                    &:after {
                        left: 0px;
                    }

                    &.open {
                        > .submenu.collapsing,
                        > .submenu.collapse.in {
                            display: none;
                        }
                    }

                    &.hover,
                    &.open.hover,
                    &:hover,
                    &.open:hover {
                        > .submenu.collapse,
                        > .submenu.collapsing,
                        > .submenu.collapse.in {
                            display: block;
                            height: auto !important;
                        }

                        // Arrow
                        // -----------------------------------
                        &.arrow:before {
                            position: absolute;
                            z-index: 1;
                            top: 50%;
                            right: 0px;
                            margin-top: -8px;
                            content: "";

                            width: 0px;
                            height: 0px;
                            border-style: solid;
                            border-width: 8px 8px 8px 0;
                            border-color: transparent darken(@sidebar-base-color, 4%) transparent transparent;

                            -webkit-box-shadow:inset 1px 0px 4px 0 darken(@sidebar-base-color, 5%);
                            box-shadow:inset 1px 0px 4px 0 darken(@sidebar-base-color, 5%);
                        }
                    }

                    &.active {
                        > a {
                            > .number {
                                .label,
                                .badge {
                                    -webkit-box-shadow: 0px 0px 0px 2px lighten(@sidebar-base-color, 2%);
                                    box-shadow: 0px 0px 0px 2px lighten(@sidebar-base-color, 2%);
                                }
                            }
                        }
                    }

                    // Menu link
                    // -----------------------------------
                    > a {
                        padding: 0px 15px;
                        line-height: @sidebar-collapse-width;

                        > .text {
                            display: none;
                        }
                        > .number {
                            display: block;
                            position: absolute;
                            top: 12px;
                            right: 10px;
                            width: auto;

                            .label,
                            .badge {
                                -webkit-box-shadow: 0px 0px 0px 2px @sidebar-base-color;
                                box-shadow: 0px 0px 0px 2px @sidebar-base-color;
                            }
                        }
                        > .arrow {
                            display: none;
                        }
                        > .figure {
                            display: block;
                            width: auto;
                            font-size: 18px;
                            padding: 0px;
                            text-align: center;
                        }
                    }

                    // Submenu - 2nd level
                    // -----------------------------------
                    > .submenu {
                        position: absolute;
                        left: @sidebar-collapse-width;
                        top: 0px;
                        width: @sidebar-width - 40;
                        padding-left: 0px;
                        padding-top: 2px;
                        padding-bottom: 2px;
                        border-top-right-radius: @border-radius;
                        border-bottom-right-radius: @border-radius;

                        &:after {
                            display: none;
                        }

                        > li {
                            // Header
                            // -----------------------------------
                            &.submenu-header {
                                display: block;
                                font-size: 15px;
                                color: lighten(@sidebar-base-color, 60%);
                                font-weight: 600;
                                padding-left: 15px;
                                padding-right: 15px;
                                padding-top: 10px;
                                padding-bottom: 5px;
                                margin-top: -2px;

                                &:after {
                                    display: none;
                                }
                            }

                            &:after {
                                left: 15px;
                            }
                            > a {
                                padding-left: 35px;
                                padding-right: 15px;
                                padding-top: 1px;
                                padding-bottom: 1px;
                            }
                        }

                        // Submenu - 3rd level
                        // -----------------------------------
                        .submenu {
                            position: static;
                            padding-left: 20px;
                            background-color: darken(@sidebar-base-color, 8%);

                            > li {
                                > a {
                                    padding-top: 1px;
                                    padding-bottom: 1px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}