/* public/css/mac-scrollbar-firefox.css */

/* ============================================
   MAC STYLE SCROLLBAR - WORKS IN ALL BROWSERS
   Firefox + Chrome + Safari + Edge
============================================ */

/* ========== FIREFOX SPECIFIC ========== */
/* These ONLY work in Firefox */
.fi-sidebar-nav {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(120, 120, 120, 0.3) transparent !important;
}

.dark .fi-sidebar-nav {
    scrollbar-color: rgba(180, 180, 180, 0.3) transparent !important;
}

/* ========== WEBKIT BROWSERS ========== */
/* These ONLY work in Chrome, Safari, Edge */
.fi-sidebar-nav::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background: transparent !important;
}

.fi-sidebar-nav::-webkit-scrollbar-track {
    background: transparent !important;
    border-radius: 8px !important;
    margin: 4px !important;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.3) !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    background-clip: content-box !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.fi-sidebar-nav:hover::-webkit-scrollbar-thumb {
    opacity: 1 !important;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.5) !important;
}

/* Dark mode for WebKit */
.dark .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(180, 180, 180, 0.3) !important;
}

.dark .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 180, 180, 0.5) !important;
}

/* ========== COMMON STYLES ========== */
/* These work in all browsers */
.fi-sidebar-nav {
    scroll-behavior: smooth !important;
    overflow-y: auto !important;
}

/* Optional: Fade edges effect */
.fi-sidebar-nav {
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20px,
        black calc(100% - 20px),
        transparent 100%
    ) !important;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20px,
        black calc(100% - 20px),
        transparent 100%
    ) !important;
}