@use "../variables";
.main-sidebar {
    margin-block-start: 3.72rem;
    padding-block-start: 0.5rem;
    padding-block-end: 5rem;
    height: 100vh;
    position: relative;
    overflow: auto;
}
.app-sidebar {
    width: 15rem;
    height: 100%;
    background: variables.$menu-bg;
    border-inline-end: 1px solid variables.$menu-border-color;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 100;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    transition: all 320ms ease;
    .main-sidebar-header {
        height: 3.75rem;
        width: 15rem;
        position: fixed;
        display: flex;
        background: variables.$menu-bg;
        z-index: 9;
        align-items: center;
        justify-content: center;
        padding: 0.813rem 1.25rem;
        border-inline-end: 1px solid variables.$menu-border-color;
        border-block-end: 1px solid variables.$menu-border-color;
        transition: all 320ms ease;
        .header-logo {
            // img {
            //     height: 2.5rem;
            //     line-height: 2.5rem;
            // }
            .desktop-logo {
                display: block;
            }
            .desktop-dark,
            .toggle-logo,
            .toggle-dark {
                display: none;
            }
        }
    }
    .slide__category {
        color: variables.$menu-prime-color;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.065rem;
        text-transform: uppercase;
        padding: 0.75rem 1.65rem;
        white-space: nowrap;
        opacity: 0.5;
        position: relative;
    }
    .slide {
        margin: 0;
        padding: 0rem 0.75rem;
    }
    .side-menu__item {
        padding: 0.65rem 0.75rem;
        position: relative;
        display: flex;
        align-items: center;
        text-decoration: none;
        font-size: 0.95rem;
        color: variables.$menu-prime-color;
        font-weight: 300;
        border-radius: variables.$default-radius;
        margin-block: 0.25rem;
        border:1px solid transparent;
        &.active,
        &:hover {
            color: variables.$primary;
            background-color: var(--primary01) !important;
            border:1px solid var(--primary02);
            .side-menu__label,.side-menu__angle {
                color: variables.$primary !important;
            }
            .side-menu__icon {
                color: variables.$primary !important;
            }
        }
        &.active {
            font-weight: 400;
        }
    }
    .slide-menu {
        &.child1,&.child2,&.child3 {
            .side-menu__item.active {
                background-color: transparent;
            }
        }
    }
    .slide-menu {
        padding: 0rem;
    }
    .slide-menu {
        &.child1,
        &.child2 {
            .side-menu__item {
                padding: 0.35rem 1.5rem;
            }
        }
    }
    .slide-menu {
        &.child1,
        &.child2,
        &.child3 {
            .side-menu__item {
                margin: 0px;
                &:before {
                    position: absolute;
                    content: "";
                    width: 0.3rem;
                    height: 0.3rem;
                    border: 1px solid variables.$menu-prime-color;
                    border-radius: 50%;
                    background-color: transparent;
                    inset-inline-start: 0.5rem;
                    opacity: 0.5;
                }
                &:hover {
                    color: variables.$primary;
                    background-color: transparent !important;
                    border-color: transparent !important;
                    &:before {
                        content: "";
                        border: 1px solid variables.$primary;
                    }
                }
                &.active {
                    background-color: transparent !important;
                    border-color: transparent !important;
                    &:before {
                        position: absolute;
                        content: "";
                        width: 0.3rem;
                        height: 0.3rem;
                        border: 1px solid variables.$primary;
                        border-radius: 50%;
                        background-color: transparent;
                        opacity: 1;
                    }
                }
            }
            li {
                padding: 0;
                padding-inline-start: 1.5rem;
                position: relative;
            }
        }
    }
    .side-menu__label {
        white-space: nowrap;
        color: variables.$menu-prime-color;
        position: relative;
        font-size: 0.95rem;
        line-height: 1;
        vertical-align: middle;
    }
    .side-menu__icon {
        margin-inline-end: 0.625rem;
        width: 1.25rem;
        height: 1.25rem;
        font-size: 1.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: variables.$menu-prime-color;
        svg {
            color: variables.$menu-prime-color;
        }
    }
    .side-menu__angle {
        transform-origin: center;
        position: absolute;
        inset-inline-end: 0.75rem;
        font-size: 0.85rem;
        color: variables.$menu-prime-color;
        transition: all 320ms ease;
    }
    .slide.side-menu__label1 {
        display: none;
    }
}
.horizontal-logo {
    padding: 0.85rem 0rem;
}
.slide.has-sub .slide-menu {
    transform: translate(0, 0) !important;
    visibility: visible !important;
}
.nav ul li {
    list-style-type: none;
}
.nav > ul {
    padding-inline-start: 0px;
}
.slide-menu {
    display: none;
}
.slide.has-sub {
    display: grid;
    &.open {
        > .side-menu__item .side-menu__angle {
            transform: rotate(90deg);
        }
    }
}

/* Responsive Styles Start */

@media (max-width: 991.98px) {
    .horizontal-logo {
        .header-logo {
            .desktop-logo,.desktop-dark,.toggle-dark {
                display: none;
            }
            .toggle-logo {
                display: block;
            }
        }
    }
    .main-content {
        padding-block-start: 4.75rem;
    }
    .app-sidebar {
        inset-block-start: 0;
        inset-inline-start: -15rem;
    }
}

.slide-left,
.slide-right {
    display: none;
}

@media (min-width:992px) {
    .horizontal-logo {
        display: none;
    }
}
/* Responsive Styles End */

/* wcsrm admin dashboard menu styles */
body.wcsrm-admin-dashboard {
    .app-sidebar {
        .side-menu__label,.side-menu__item {
            font-size: 0.8rem;
        }
    }
}
.sidebar-seperator {
    &:first-child {
        margin-block-start: 0.25rem;
    }
    &.top {
            border-top: 1px solid rgba(255,255,255,0.1);
    }
    &.bottom {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}
/* wcsrm admin dashboard menu styles */

[data-nav-layout="horizontal"] {
    .app-sidebar .slide-menu.child1 .side-menu__item:before, .app-sidebar .slide-menu.child2 .side-menu__item:before, .app-sidebar .slide-menu.child3 .side-menu__item:before {
        content: "";
        display: none;
    }
}