/* Sidenav Styles*/

.app-menu {
    @apply w-(--sidenav-width) min-w-(--sidenav-width) fixed top-0 bottom-0 z-40 flex max-h-screen shadow flex-col transition-all duration-300 font-secondary border-e border-(--sidenav-border-color);
    transition-property: width, min-width, margin;
    background: var(--sidenav-bg);
}

.sidenav-user {
    background-size: cover !important;
    color: var(--sidenav-item-color);
    margin: 0 10px;
    @apply mb-2 hidden p-4!;

    .sidenav-user-name {
        color: var(--sidenav-item-active-color);
    }
}

html[data-sidenav-user="true"] {
    .sidenav-user {
        display: block;
    }
}

/* menu */
.side-nav {
    @apply flex w-full flex-col gap-1.25;

    .menu-title {
        @apply mt-3;
        letter-spacing: 0.1em;
        pointer-events: none;
        cursor: default;
        white-space: nowrap;
        text-transform: uppercase;
        color: var(--sidenav-item-color);
        font-weight: var(--font-weight-bold);
        font-size: calc(var(--sidenav-item-font-size) * 0.7);
        margin-top: 10px;
        padding: var(--sidenav-item-padding-y) calc(var(--sidenav-item-padding-x) * 1.16666667);
    }

    .menu-item {
        .menu-link {
            @apply font-secondary relative flex items-center rounded-[5px] bg-transparent whitespace-nowrap transition-all;
            color: var(--sidenav-item-color);
            font-size: var(--sidenav-item-font-size);
            font-weight: var(--sidenav-item-font-weight);
            line-height: calc(var(--sidenav-item-font-size) * 1.25);
            gap: var(--sidenav-item-gap);
            padding: var(--sidenav-item-padding-y) var(--sidenav-item-padding-x);
            
            > .menu-icon {
                width: var(--sidenav-item-icon-size);
                height: var(--sidenav-item-icon-size);
                font-size: var(--sidenav-item-icon-size);
                line-height: var(--sidenav-item-icon-size);
                @apply transition-all;

                svg {
                    width: var(--sidenav-item-icon-size);
                    height: var(--sidenav-item-icon-size);
                }
            }

            > .menu-text {
                @apply whitespace-nowrap transition-all;
            }

            > .menu-arrow {
                @apply hs-accordion-active:rotate-180 ms-auto text-sm transition-all;
                width: 1em;
                height: 1em;
                background-color: currentColor;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9l6 6l6-6'/%3E%3C/svg%3E");
                mask-repeat: no-repeat;
                mask-size: 100% 100%;
            }

            &:is(.open, .active, :active, :focus) {
                color: var(--sidenav-item-active-color);
            }

            &:is(:hover) {
                color: var(--sidenav-item-hover-color);
            }

            .badge {
                @apply ms-auto flex h-4 items-center justify-center text-[.75em] font-bold;
            }
        }

        &.active .menu-link.active .menu-arrow {
            @apply rotate-180;
        }
    }

    > .menu-item {
        > .menu-link {
            &:is(.open, .active, :active, :focus) {
                background-color: var(--sidenav-item-active-bg);
            }

            &:is(:hover) {
                /* background-color: var(--sidenav-item-hover-bg); */
            }
        }

        &.active > .menu-link {
            background-color: var(--sidenav-item-active-bg);
            color: var(--sidenav-item-active-color);
        }
    }

    /* Sub Level Menu */
    .sub-menu {
        @apply w-full space-y-1 overflow-hidden ps-7.5 transition-all duration-300;

        .menu-link {
            font-size: var(--sidenav-sub-item-font-size);
            padding: var(--sidenav-sub-item-padding-y) var(--sidenav-sub-item-padding-x);
            font-weight: var(--sidenav-sub-item-font-weight);
        }

        .sub-menu {
            @apply -ms-(--sidenav-item-icon-size);
        }

        .menu-link.active {
            font-weight: var(--sidenav-item-font-weight);
            @apply bg-transparent text-(--sidenav-item-hover-color);
        }
    }
}

/* Sidenav Hover Button */
#button-hover-toggle {
    @apply h-(--topbar-height) relative hidden items-center justify-center text-(--sidenav-item-color) transition-all ease-in-out;
    font-size: 18px;

    .btn-on-hover-icon {
        height: 1em;
        width: 1em;
        border-radius: 50%;
        border: 2px solid currentColor;
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }

}

/* Small Hover */
html[data-sidenav-size="on-hover"] {
    .app-menu:not(:hover) {
        @apply w-(--sidenav-width-sm) min-w-(--sidenav-width-sm);

        .logo-box {
            @apply !justify-start;

            .logo-lg {
                display: none;
            }

            .logo-sm {
                display: flex;
            }
        }

        #button-hover-toggle {
            display: none;
        }

        .menu-item {
            .menu-link {
                @apply justify-center;

                .menu-text,
                .menu-arrow,
                .badge {
                    display: none;
                    /* visibility: hidden; */
                }

                .menu-icon {
                    font-size: calc(var(--sidenav-item-icon-size) * 1.15);
                    line-height: calc(var(--sidenav-item-icon-size) * 1.15);
                    height: calc(var(--sidenav-item-icon-size) * 1.15);
                    width: calc(var(--sidenav-item-icon-size) * 1.15);

                    i {
                        font-size: calc(var(--sidenav-item-icon-size) * 1.15);
                        line-height: calc(var(--sidenav-item-icon-size) * 1.15);
                    }

                    svg {
                        height: calc(var(--sidenav-item-icon-size) * 1.15);
                        width: calc(var(--sidenav-item-icon-size) * 1.15);
                    }
                }
            }

            .sub-menu {
                margin-top: 0;
                visibility: hidden !important;
                height: 0;
            }
        }

        .menu-title {
            @apply hidden;
        }

        .simplebar-track.simplebar-vertical {
            visibility: hidden !important;
        }

        .sidenav-user {
            display: none;
        }
    }

    .app-menu {
        @apply fixed bottom-0;

        .simplebar-track.simplebar-horizontal {
            visibility: hidden !important;
        }
    }

    .page-content {
        @apply ms-(--sidenav-width-sm);
    }

    #button-hover-toggle {
        @apply flex;
    }

    #button-toggle-menu{
        display: none;
    }

    .logo-box {
        @apply !justify-start;
    }
}

/* hover active */
html[data-sidenav-size="on-hover-active"] {
    #button-toggle-menu {
        @apply hidden;
    }

    #button-hover-toggle {
        @apply flex;

        .btn-on-hover-icon {
            &::before {
                height: 6px;
                width: 6px;
                background-color: currentColor;
                border-radius: 50%;
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    .page-content {
        @apply ms-(--sidenav-width);
    }

    .app-menu {
        @apply fixed bottom-0;
    }

    .logo-box {
        @apply !justify-start;
    }
}

/* Small Sidenav Width ( 'sm' width || item Hover View ) */
html[data-sidenav-size="condensed"] {
    .app-menu {
        @apply absolute w-(--sidenav-width-sm) min-w-(--sidenav-width-sm);
        height: unset;
        max-height: unset;

        .simplebar-mask,
        .simplebar-content-wrapper {
            overflow: visible !important;
        }

        .logo-box {
            background: var(--sidenav-bg);
            @apply z-40;

            .logo-lg {
                display: none;
            }

            .logo-sm {
                display: flex;
            }
        }

        .sidenav-user {
            @apply hidden;
        }

        .side-nav {
            padding: 0;
            gap: 0;

            .menu-title {
                display: none;
            }

            .menu-item {
                position: relative;

                > .menu-link {
                    transition: none;
                    padding: calc(var(--sidenav-item-padding-y) * 1.75) var(--sidenav-item-padding-x);

                    > .menu-icon {
                        display: flex;
                        justify-content: center;
                        font-size: calc(var(--sidenav-item-icon-size) * 1.25);
                        line-height: calc(var(--sidenav-item-icon-size) * 1.25);
                        height: calc(var(--sidenav-item-icon-size) * 1.25);
                        width: calc(var(--sidenav-item-icon-size) * 1.25);
                        min-width: calc(var(--sidenav-width-sm) - var(--sidenav-item-padding-x) - var(--sidenav-item-padding-x));

                        i {
                            font-size: calc(var(--sidenav-item-icon-size) * 1.25);
                            line-height: calc(var(--sidenav-item-icon-size) * 1.25);
                        }

                        svg {
                            height: calc(var(--sidenav-item-icon-size) * 1.25);
                            width: calc(var(--sidenav-item-icon-size) * 1.25);
                        }
                    }

                    &::before,
                    > .menu-text,
                    > .menu-arrow,
                    > .badge {
                        transition: none;
                        display: none;
                    }
                }

                .sub-menu {
                    margin-top: 0;
                    display: none !important;
                    height: inherit !important;
                }

                &:hover {
                    > .sub-menu {
                        display: block !important;
                        inset-inline-start: 100%;
                        overflow: visible;
                        position: absolute;
                        height: inherit !important;
                        transition: none;
                        padding-inline-start: 0;
                        background: var(--sidenav-bg);
                        width: calc(var(--sidenav-width) - calc(var(--sidenav-width-sm) * 0.65));
                        @apply shadow z-90;

                        > .menu-item {
                            margin-bottom: 0;

                            > .menu-link {
                                z-index: 5;
                                padding: calc(var(--sidenav-sub-item-padding-y) * 1.5) calc(var(--sidenav-sub-item-padding-x) * 1.5);

                                > .menu-arrow,
                                > .menu-text {
                                    display: block;
                                    transition: color .25s ease-in-out;
                                }

                                > .menu-arrow {
                                    transform: rotate(-90deg);
                                }
                            }

                            .sub-menu {
                                top: 0;
                                @apply ms-0;
                            }
                        }
                    }
                }
            }

            > .menu-item {
                /* > .menu-link {
                    background: var(--sidenav-bg);
                } */

                &:hover {

                    .menu-text {
                        @apply flex;
                    }

                    > .menu-link {
                        color: var(--sidenav-item-hover-color);
                        background-color: var(--sidenav-item-hover-bg);
                    }

                    > .menu-link {
                        background: var(--sidenav-bg);
                        width: calc(var(--sidenav-width) + calc(var(--sidenav-width-sm) * 0.35));

                        @apply shadow;
                    }
                }

                > .menu-link {
                    &.hs-accordion-toggle {
                        @apply rounded-se-md rounded-none;
                    }

                    &:not(.hs-accordion-toggle) {
                        > .menu-text {
                            @apply rounded-md;
                        }
                    }
                }

                > .sub-menu {
                    @apply rounded-b-md;

                    .sub-menu {
                        @apply rounded-md;
                    }
                }
            }
        }
    }

    .page-content {
        min-height: 2700px;
    }
}

/* Compact Menu ( 'md' width ) */
html[data-sidenav-size="compact"] {
    .app-menu {
        @apply w-(--sidenav-width-md) min-w-(--sidenav-width-md);

        .sidenav-user {
            .sidenav-user-set-icon {
                display: none;
            }
        }

        .menu-arrow {
            display: none;
        }
    }
}

/* Mobile View Sidenav (Mobile Sidebar || Open Sidenav with Backdrop) */
html[data-sidenav-size="offcanvas"] {
    .app-menu {
        @apply -ms-(--sidenav-width) fixed opacity-0 !transition-all;
    }

    &.sidenav-enable {
        .app-menu {
            @apply z-50 ms-0 opacity-100;
        }
    }
}

/* Hidden Sidenav View ( Fullscreen page content view) */
html[data-sidenav-size="hidden"] {
    .app-menu {
        @apply -ms-(--sidenav-width);
    }
}
