/* Sidebar navigation menu
/* ------------------------------------------------------------------------- */

#main-menu {
    padding: 0 0 20px;
}
#main-menu .menu {
    padding-inline-start: 0;
}
#main-menu .menu li { list-style: none; }

#main-menu .menu .menu-header {
    color: var(--sidebar-menu-header-color);
    font-size: 12px;
    font-weight: 500;
    line-height: 15px;
    margin-block-start: 15px;
    padding: 7px 5px 7px var(--sidebar-menu-items-padding-left);
    text-transform: uppercase;
}
#main-menu .menu .menu-header:first-child { margin-block-start: 0; }

#main-menu .menu .menu-header .menu-icon { color: inherit; margin: 0 8px 0 0; }
#main-menu .menu .menu-header .menu-header-contents { display: block; }
#main-menu .menu .menu-header .menu-item-badge {
    float: right;
    margin-inline-start: 16px;
    inset-block-start: 0;
}

#main-menu .menu .menu-item {
    border-radius: var(--border-radius);
    padding-inline-start: var(--sidebar-menu-items-padding-left);
    padding-inline-end: 5px;
    position: relative;
}
#main-menu .menu .menu-item.active {
    background: var(--sidebar-menu-active-item-bg);
}
#main-menu .menu .menu-item.active .menu-item-label { font-weight: 500; }

#main-menu .menu .menu-item.active .menu-item-badge.badge-secondary {
    background: var(--sidebar-menu-badge-active-bg);
    color: var(--sidebar-menu-badge-active-color);
}

#main-menu .menu .menu-item.active:not(.expanded) a,
#main-menu .menu .menu-item.active:not(.expanded) .menu-icon {
    color: var(--sidebar-menu-active-item-color);
}

#main-menu .menu .menu-item.has-submenu.expanded .submenu-toggle-icon {
    transform: rotate(90deg);
}

#main-menu .menu .menu-item.has-submenu:not(.expanded) .submenu {
    /* don't use 'display: none' to hide submenus; it breaks the menu accordion */
    max-block-size: 0px;
}

#main-menu .menu .menu-item .submenu-toggle .submenu-toggle-icon {
    color: var(--sidebar-menu-icon-color);
    transition: transform 0.25s ease;
    inline-size: auto; /* this is needed to make it look better */
}

#main-menu .menu .menu-item-contents {
    align-items: flex-start;
    color: var(--sidebar-menu-color);
    display: flex;
    padding: 4px 0;
}

#main-menu .menu .menu-icon {
    color: var(--sidebar-menu-icon-color);
    flex-shrink: 0;
    margin-inline-end: 10px;
    text-align: center;
    block-size: 16px;
    inline-size: 1.25em;
}
#main-menu .menu .menu-icon svg {
    color: var(--sidebar-menu-icon-color);
    max-block-size: 16px;
    max-inline-size: 20px;
    vertical-align: sub;
}

#main-menu .menu .menu-item-badge {
    float: right;
    min-inline-size: 25px;
    margin: 0 0 0 8px;
    position: relative;
    inset-block-start: 2px;
}
#main-menu .menu .menu-item-badge.badge-secondary {
    background: var(--sidebar-menu-badge-bg);
    color: var(--sidebar-menu-badge-color);
}

#main-menu .menu .submenu-toggle-icon {
    float: right;
    margin-inline-start: 8px;
}

#main-menu .menu .submenu {
    /* padding must be 0 for the element that slides up/down;
       if some padding is needed, create another HTML element inside this one */
    padding: 0;
    overflow: hidden;
    transition: max-block-size 150ms linear;
}
#main-menu .menu .submenu a {
    color: var(--sidebar-menu-submenu-color);
    padding: 3px 0 3px 26px;
}

#main-menu .menu .submenu .menu-header {
    padding-inline-start: 26px;
}

#main-menu .menu .submenu .menu-item {
    margin: 5px 0 5px 0;
    padding-inline-end: 0;
}
#main-menu .menu .submenu .menu-item.active {
    padding-inline-start: 6px;
    margin-inline-start: 0;
}
#main-menu .menu .submenu .menu-icon { font-size: var(--font-size-base); margin-inline-end: 5px; }
#main-menu .menu .submenu .menu-item-badge { margin-inline-end: 4px; }

body.ea-sidebar-width-compact .sidebar {
    padding: 0;
    overflow: visible;
}
body.ea-sidebar-width-compact .sidebar .main-header .navbar {
    padding-inline-start: var(--sidebar-padding-left);
}

body.ea-sidebar-width-compact .sidebar #main-menu .menu .menu-item {
    padding-inline-start: var(--sidebar-padding-left);
}

@media(min-width: 992px) {
    body.ea-sidebar-width-compact #main-menu .menu .menu-item {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        padding-inline-end: 0;
    }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-label,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-badge,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .submenu,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .submenu-toggle-icon {
        display: none;
    }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-label { flex: 1; }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-contents {
        align-items: center;
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        display: flex;
        min-inline-size: max-content;
        padding: 7px 5px 7px 0;
    }

    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover {
        background: var(--body-bg);
        box-shadow: var(--sidebar-menu-compact-hover-box-shadow);
        min-inline-size: max-content;
        padding-inline-start: var(--sidebar-padding-left);
        z-index: var(--zindex-modal-backdrop);
    }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover i { color: var(--sidebar-menu-icon-color) !important; }

    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-item-label,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-item-badge,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu,
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu-toggle-icon {
        display: block;
    }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-item-contents { background: var(--body-bg); color: var(--text-color); }

    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu {
        background: var(--body-bg);
        border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
        position: absolute;
        inset-block-start: 0;
        margin-inline-start: 34px;
        padding: 2px 10px 0 0;
        inline-size: max-content;
    }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .submenu a {
        padding: 3px 5px 3px 13px;
    }

    body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu-toggle .menu-item-label { display: none; }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu-toggle-icon {
        display: inline-block;
        font-size: 18px;
        inset-inline-start: -7px;
        transform: rotate(0);
        inset-block-start: 0;
        z-index: 9999;
    }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item.has-submenu:hover .submenu .menu-icon { margin-inline-end: 8px; }

    body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-icon { font-size: 18px; block-size: 21px; max-inline-size: 21px; line-height: normal; }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .submenu .menu-icon { font-size: 16px; position: relative; inset-inline-start: -4px; inline-size: 21px; }

    body.ea-sidebar-width-compact #main-menu .menu .menu-item .submenu {
        box-shadow: var(--sidebar-menu-compact-hover-box-shadow);
        max-block-size: initial !important;
        padding-block-start: 5px;
        padding-block-end: 5px;
    }
    body.ea-sidebar-width-compact #main-menu .menu .menu-item .submenu .menu-item:hover { box-shadow: none; }

    body.ea-sidebar-width-compact #main-menu .menu .menu-header {
        block-size: 0;
        overflow: hidden;
        padding: 0;
        inline-size: 0;
    }
}