@use "../variables";
[data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
    @media(min-width: 992px) {
        &:not([data-icon-overlay="open"]) {
            .app-sidebar {
                width: 5rem;
                .main-sidebar-header {
                    width: 5rem;
                    justify-content: center;
                    .header-logo {
                        .toggle-logo {
                            display: block;
                        }
                        .desktop-dark,
                        .desktop-logo,
                        .toggle-dark {
                            display: none;
                        }
                    }
                }
                .category-name,
                .side-menu__label,
                .side-menu__angle {
                    display: none;
                }
                .slide.has-sub.open {
                    .slide-menu {
                        display: none !important;
                    }
                }
                .side-menu__icon {
                    margin-inline-end: 0;
                }
                .main-menu{
                    padding-inline: 0.5rem;
                }
               .slide {
                    padding: 0 0rem !important;
                } 
                .slide__category {
                    padding: 1.65rem;
                    position: relative;
                    &:before {
                        content: "\f3c2";
                        font-family: remixicon !important;
                        position: absolute;
                        font-size: 8px;
                        inset-inline-start: 1.75rem;
                        inset-inline-end: 0;
                        inset-block-start: 1rem;
                        inset-block-end: 0;
                        opacity: 1;
                        color: variables.$menu-prime-color;
                    }
                }
                .side-menu__item .badge {
                    display: none;
                }
            }
            .side-menu__item {
                justify-content: center;
            }
            .sidebar-profile {
                display: none;
            }
        }
        .app-header {
            padding-inline-start: 5rem;
        }
        .app-content {
            margin-inline-start: 5rem;
        }

        &[data-icon-overlay="open"] {
            .app-sidebar {
                width: 16rem;
                .main-sidebar-header {
                    width: 16rem;
                    .header-logo {
                        .desktop-logo {
                            display: block;
                        }
                        .desktop-dark,
                        .toggle-logo,
                        .toggle-dark {
                            display: none;
                        }
                    }
                }
                .side-menu__item {
                    justify-content: flex-start;
                }
                .side-menu__icon {
                    margin-inline-end: 0.625rem;
                }
                .slide__category {
                    padding: 0.75rem 1.2rem;
                    &:before {
                        display: none;
                    }
                }
            }
        }
        
        &[data-theme-mode="dark"] {
            .main-sidebar-header {
                .header-logo {
                    .toggle-dark {
                        display: block;
                    }
                    .desktop-dark,
                    .desktop-logo,
                    .toggle-logo {
                        display: none;
                    }
                }
            }
            &[data-icon-overlay="open"] {
                .main-sidebar-header {
                    .header-logo {
                        .desktop-dark {
                            display: block;
                        }
                        .toggle-dark,
                        .desktop-logo,
                        .toggle-logo {
                            display: none;
                        }
                    }
                }   
                &[data-menu-styles="light"] {
                    .main-sidebar-header {
                        .header-logo {
                            .desktop-logo {
                                display: block;
                            }
                            .toggle-dark,
                            .desktop-dark,
                            .toggle-logo {
                                display: none;
                            }
                        }
                    }   
                }
            }
        }
    }
}
[data-menu-styles="color"][data-header-styles="light"][data-nav-layout="vertical"][data-vertical-style="overlay"][data-toggled="icon-overlay-close"] {
    .animated-arrow span:before,.animated-arrow span:after {
        background: var(--header-prime-color);
    }
}