html.dark {
    .fi-sidebar-nav, .fi-sidebar-header {
        background-color: #0f1623;
    }

    .fi-sidebar-nav {
        box-shadow: 1px 0 20px 0 #0f162399;
    }

    .dark\:bg-gray-950:is(.dark *) {
        background-color: rgb(24 33 51);
    }
}

html:not(.dark) {
    .fi-sidebar-nav, .fi-sidebar-header {
        background-color: #ffffff;
        box-shadow: 0 1px 2px 0 rgba(13, 37, 81, 0.05);
    }
}

.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.5);
    border-radius: 9999px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.8);
}

html.dark .fi-sidebar-nav {
    scrollbar-color: rgba(100, 116, 139, 0.6) transparent;
}

html.dark .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.6);
}

html.dark .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.85);
}