@use "../variables";
[data-vertical-style="doublemenu"] {
    @media (min-width: 992px) {
        .app-sidebar .slide-menu.child2 .side-menu__item,.app-sidebar .slide-menu.child3 .slide .side-menu__item {
            margin-block: 0 !important;
            &:before {
                display: block !important;
                inset-block-start: 16px;
                inset-inline-start: -6px;
                opacity: 1;
                font-size: 5px;
            }
        }
        .app-sidebar .side-menu__item svg.side-menu__icon {
            width: 22px;
            height: 22px;
        }
        .app-sidebar .slide-menu.child1 .side-menu__item {
            margin-block: 0.25rem;
            &:hover {
                .side-menu-doublemenu__icon {
                    color: variables.$primary;
                    fill: variables.$primary;
                }
            }
        }
        .app-header .header-theme-mode {
            display: none;
        }
        .app-sidebar .main-sidebar {
            padding-block-end: 15rem;
        }
        .app-sidebar .doublemenu_bottom-menu.main-menu > .slide {
            padding: 0 0.48rem;
        }
        .app-sidebar .doublemenu_bottom-menu.main-menu {
            display: block;
            position: fixed;
            bottom: 0;
            background-color: var(--menu-bg);
            padding-block: 0.5rem;
            .layout-setting-doublemenu {
                .light-layout {
                    display: block;
                }
                .dark-layout {
                    display: none;
                }
            }
        }
        .app-sidebar .slide-menu.child1.doublemenu_slide-menu {
            display: block;
            bottom: 0 !important;
            position: fixed !important;
            top: inherit !important;
            height: 14rem !important;
            width: 14rem !important;
            padding: 0;
            inset-inline-start: 64px;
            li {
                position: fixed;
                bottom: 0;
                background-color: variables.$primary;
                border-radius: 10px;
                width: 12rem;
                height: 12rem;
                margin: 16px;  
                padding-inline-start: 0;
                overflow: hidden;
                z-index: 1;
                .upgrade-menu-content {
                    padding-top: 43px;
                }
                .doublemenu_slide-menu-background {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    inset-inline-start: 0;
                    inset-block-start: 0;
                    z-index: -1;
                    opacity: 0.2;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .avatar {
                    background-color: rgba(255, 255, 255, 0.25);
                    backdrop-filter: blur(30px);
                    overflow: hidden;
                    .top-right:before {
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 2px;
                        background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
                        top: 0;
                        inset-inline-start: 0;
                    }
                    .bottom-right:before {
                        content: "";
                        position: absolute;
                        width: 2px;
                        height: 100%;
                        background: linear-gradient(to top, transparent, rgba(255,255,255,0.9));
                        bottom: 0;
                        inset-inline-end: 0;
                    }
                }
            }
        } 
        &[data-theme-mode="dark"] {
            .app-sidebar .doublemenu_bottom-menu.main-menu {
                .layout-setting-doublemenu {
                    .light-layout {
                        display: none;
                    }
                    .dark-layout {
                        display: block;
                    }
                }
            }
        }
        .app-sidebar .slide-menu.child1 .side-menu__item, .app-sidebar .slide-menu.child2 .side-menu__item {
            padding: 0.5rem 1rem;
        }
        .app-sidebar .slide-menu.child1 .side-menu__item:before {
            display: none;
        }
        .app-sidebar .slide-menu.child1 .side-menu__item.active {
            background-color: variables.$primary !important;
        }
        .app-sidebar .slide-menu.child1 > .slide.active > .side-menu__item.active {
            color: variables.$white !important;
        }
        .app-sidebar .slide-menu.child2 .side-menu__item.active, .app-sidebar .slide-menu.child3 .side-menu__item.active {
            background-color: transparent !important;
        }
        .app-sidebar .slide-menu.child1 .side-menu__item.active, .app-sidebar .slide-menu.child2 .side-menu__item.active, .app-sidebar .slide-menu.child3 .side-menu__item.active {
            .side-menu-doublemenu__icon {
                color: variables.$white;
                fill: variables.$white;
            }
        }
        .slide-menu.double-menu-active {
            display: block !important;
        }
        .side-menu-doublemenu__icon {
            display: block;
            width: 18px;
            height: 18px;
            margin-inline-end: 0.5rem;
            color: var(--menu-icon-color);
            fill: var(--menu-icon-color);
        }

        .app-sidebar {
            width: 4rem;

            .main-sidebar {
                overflow: visible;
                height: 100%;
                box-shadow: none;
                margin-block-start: 0;
            }

            .slide-menu.child1 {
                padding-block-end: 1rem;
            }

            .main-sidebar-header {
                width: 4rem;
                backdrop-filter: blur(30px);
                justify-content: center;
                border-block-end: 0px solid variables.$menu-border-color !important;

                .header-logo {
                    .toggle-logo {
                        display: block !important;
                    }

                    .desktop-dark,
                    .desktop-logo,
                    .toggle-dark {
                        display: none !important;
                    }
                }
            }

            .main-menu-container {
                margin-block-start: 4rem;
            }

            .main-menu>.slide {
                padding: 0 0.5rem;
            }

            .category-name,
            .side-menu__label,
            .side-menu__angle {
                display: none;
            }

            .side-menu__icon {
                margin-inline-end: 0;
                color: var(--menu-icon-color);
                fill: var(--menu-icon-color);
            }

            .side-menu__item {
                padding: .8125rem;

                &:hover,
                &.active {
                    .side-menu__icon {
                        color: variables.$primary;
                        fill: variables.$primary;
                    }
                }
            }

            .slide__category {
                display: none;
            }

            .simplebar-content-wrapper {
                position: initial;
            }

            .simplebar-mask {
                position: inherit;

            }

            .simplebar-placeholder {
                height: auto !important;
            }
        }

        .app-header {
            padding-inline-start: 18rem;
        }

        .app-content {
            margin-inline-start: 18rem;
        }
        .slide.has-sub .slide-menu {
            position: absolute !important;
            inset-inline-start: 4rem !important;
            background: variables.$menu-bg;
            box-shadow: none;
            transition: none !important;
            height: calc(100% - 216px) !important;
            inset-block-start: 0;
            inset-inline-end: 0;
            border-inline-end: 0px solid variables.$menu-border-color;

            &.child2 {
                padding-inline-start: 2.6rem;
            }   
            &.child3 {
                padding-inline-start: 1rem;
            }
            &.child2,
            &.child3 {
                inset-inline-start: 0 !important;
                position: relative !important;
                height: auto !important;
                inset-block-start: 0 !important;
                border-inline-end: 0;

                .slide {
                    &:nth-child(2) {
                        padding-block-start: 0rem;
                    }
                }
            }
        }

        .slide-menu {
            &.child1 {
                .slide {
                    padding-inline: 0.5rem;
                }
            }
        }

        .slide-menu {

            &.child2,
            &.child3 {
                .slide {
                    padding-inline-start: 0;
                }
            }
        }

        .slide-menu {

            &.child1,
            &.child2,
            &.child3 {
                .slide {
                    .side-menu__item {
                        text-align: start;
                    }
                }

                .side-menu__angle {
                    display: block;
                    inset-block-start: 0.65rem;
                }
            }

            &.child2,
            &.child3 {
                min-width: 10rem;
            }
            &.child2 {
                .side-menu__angle {
                    inset-inline-end: 0.5rem !important;
                }
            }
            &.child1 {
                min-width: 14rem;
                .side-menu__angle {
                    inset-inline-end: 1rem;
                }
            }
        }

        .side-menu__label1 {
            display: block !important;
            font-size: 0.938rem;
            font-weight: 500;
            color: variables.$primary;
            border-block-end: 0px solid variables.$menu-border-color;
            padding: 1.5rem 1rem !important;
            width: 12rem;
            height: 4.25rem;
        }

        .slide-menu {
            display: none;

            &.double-menu-active {
                visibility: visible !important;
                height: 100% !important;
                position: absolute;
                top: 0;
                border-radius: 0 !important;
                border-block-start: 0;
            }
            &.child1 {
                overflow: hidden scroll;
            }
        }

        &[data-theme-mode="light"] {
            &[data-menu-styles="dark"] {
                .app-sidebar .main-sidebar-header {
                    .header-logo {

                        .desktop-logo,
                        .desktop-dark,
                        .toggle-logo {
                            display: none !important;
                        }

                        .toggle-dark {
                            display: block !important;
                        }
                    }
                }
            }

            &[data-menu-styles="color"],
            &[data-menu-styles="gradient"] {
                .app-sidebar .main-sidebar-header {
                    .header-logo {

                        .desktop-logo,
                        .desktop-dark,
                        .toggle-logo {
                            display: none !important;
                        }

                        .toggle-dark {
                            display: block !important;
                        }
                    }
                }
            }
        }

        &[data-theme-mode="dark"] {
            .app-sidebar .main-sidebar-header {
                .header-logo {

                    .desktop-logo,
                    .desktop-dark,
                    .toggle-logo {
                        display: none !important;
                    }

                    .toggle-dark {
                        display: block !important;
                    }
                }
            }

            &[data-menu-styles="light"] {
                .app-sidebar .main-sidebar-header {
                    .header-logo {

                        .desktop-logo,
                        .desktop-dark,
                        .toggle-dark {
                            display: none !important;
                        }

                        .toggle-logo {
                            display: block !important;
                        }
                    }
                }
            }

            &[data-page-style="classic"] {
                .slide.has-sub .slide-menu {
                    border-inline-end: 1px solid variables.$default-border;
                }
            }
        }

        &[data-toggled="double-menu-close"] {
            .app-header {
                padding-inline-start: 4rem;
            }

            .app-content {
                margin-inline-start: 4rem;
            }

            .app-sidebar {
                .slide.has-sub .slide-menu {
                    display: none !important;
                }

                .main-sidebar {
                    box-shadow: variables.$box-shadow;
                }
            }
        }

        &[data-toggled="double-menu-open"] {
            .app-sidebar .main-sidebar {
                .slide.side-menu__label1 {
                    border-inline-end: 0px !important;
                }
            }
        }

        &[data-nav-layout=vertical] .app-sidebar .main-menu>.slide>.side-menu__item {
            margin-bottom: 8px;
        }
    }
}

@media (max-width: 991.98px) {
    .app-sidebar .main-menu .slide .custome-tooltip {
        display: none !important;
    }
}

[data-vertical-style="doublemenu"][data-toggled="double-menu-open"]{
    .doublemenu_slide-menu{
        display: block !important;
    }
}

.doublemenu_slide-menu{
    display: none !important;
}

[data-vertical-style="doublemenu"][data-toggled="double-menu-open"][data-width="boxed"]{
    .doublemenu_slide-menu{
        display: none !important;
    }
}