:root {
    --item-bg: #E3E3E3;
    --item-hover-bg: #f3f3f3;
}

.sidebar-menu {
    display: flex;
}

.sidebar-menu .nav-link {
    height: 44px;
    border-radius: 50rem;
    background-color: var(--item-bg);
    border: 1px solid var(--item-bg);
    transition: width 0.3s linear;
}

.sidebar-menu.collapsed .nav-link {
    width: 44px !important;
    border-radius: 50%;
}

.sidebar-menu .nav-link:not(.active):hover {
    background-color: var(--item-hover-bg) !important;
    border-color: var(--item-hover-bg) !important;
}

.sidebar-menu .nav-link .tab-icon {
    color: var(--base-dark-gray);
}

.sidebar-menu .nav-link.active {
    background-color: var(--base-dark-gray);
    color: white;
}

.sidebar-menu .nav-link.active:hover {
    background-color: var(--base-dark-gray) !important;
}

.sidebar-menu .nav-link.active .tab-icon {
    color: white;
}

.sidebar-menu .sidebar-items {
    gap: 10px;
}

.sidebar-menu .nav-link .nav-link-text {
    padding-top: 4px;
    margin-inline-start: 6px;
    color: var(--base-dark-gray);
}


.sidebar-menu .nav-link.active .nav-link-text {
    color: white;
}
 
@media (min-width: 576px) {
    .sidebar-menu:not(.collapsed) .sidebar-items {
        padding: 0 12px;
    }
    .sidebar-menu {
        transition: width 0.4s ease-in-out;
    }
    .sidebar-menu:not(.collapsed) {
        /* width: 8.5rem; */
        width: 11rem;
    } 
    .sidebar-menu.collapsed .nav-link-text {
        display: none;
    }
    .sidebar-menu:not(.collapsed) .nav-link-text {
        display: block;
    }
    .sidebar-menu.collapsed {
        width: 4rem;
    }
}

@media (max-width: 575.98px) {
    .sidebar-menu .sidebar-items {
        width: 100%;
        padding: 0 20px;
    }
    .sidebar-menu:not(.collapsed) {
        width: 12rem;
    }
    .sidebar-menu {
        z-index: 1091;
        position: fixed;
        top: 0;
        height: 100%;
        background-color: var(--base-bg);
        transition: transform 0.3s ease-in-out;
        will-change: transform;
        align-items: center;
        box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    }
    html[dir="rtl"] .sidebar-menu {
        left: 0;
    }
    html[dir="ltr"] .sidebar-menu {
        right: 0;
    }
    html[dir="rtl"] .sidebar-menu.collapsed {
        transform: translateX(-100%);
    }
    html[dir="ltr"] .sidebar-menu.collapsed {
        transform: translateX(100%);
    }
    
    .sidebar-menu:not(.collapsed) {
        transform: translateX(0);
    }
    
    body.preload .sidebar-menu {
        visibility: hidden;
    } 

    .sidebar-menu .nav-link {
        height: 44px;
        /* border-radius: 0; */
        background-color: unset;
        border: none;
    }

    .sidebar-menu .nav-link:not(.active):hover {
        background-color: unset !important;
        border-color: unset !important;
        font-weight: 600;
    }

    /* Align icons to the right in mobile */
    .sidebar-menu .nav-link {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .sidebar-menu .nav-link .tab-icon {
        order: 2;
        margin-left: 8px;
    }

    .sidebar-menu .nav-link .nav-link-text {
        order: 1;
        margin-left: 0;
        /* margin-right: 8px; */
    }

    /* Hide text when menu is collapsed in mobile */
    .sidebar-menu.collapsed .nav-link .nav-link-text {
        display: none;
    }

    /* Show text when menu is open in mobile */
    .sidebar-menu:not(.collapsed) .nav-link .nav-link-text {
        display: block;
    }
 
}