@import 'variables.css';

/* ========================================
   CROSS-BROWSER SCROLLBAR STYLES - FIXED
   ======================================== */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-red-dark) var(--scrollbar-track-light);
}

/* Chrome, Edge, Safari (WebKit browsers) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    transition: width 0.35s ease, height 0.35s ease;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-light);
    border-radius: 10px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        var(--scrollbar-red-light) 0%,
        var(--scrollbar-red-mid) 40%,
        var(--scrollbar-red-dark) 70%,
        var(--scrollbar-red-maroon) 100%
    );
    border: 2px solid var(--scrollbar-track-light);
    min-height: 40px;
    transition: all 0.3s ease;
}

/* Hover effect on thumb */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        var(--scrollbar-red-hover-light) 0%,
        var(--scrollbar-red-firebrick) 40%,
        var(--scrollbar-red-dark) 70%,
        var(--scrollbar-red-deeper) 100%
    );
    border-width: 1px;
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.4);
}

/* Active/Click effect on thumb */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        var(--scrollbar-red-firebrick) 0%,
        var(--scrollbar-red-dark) 40%,
        var(--scrollbar-red-deep) 70%,
        var(--scrollbar-red-bottom) 100%
    );
    border-width: 1px;
}

/* Scrollbar corner */
::-webkit-scrollbar-corner {
    background: var(--scrollbar-track-light);
}

/* ========================================
   EXPAND ON HOVER - FIXED VERSION
   ======================================== */

/* Use JavaScript class or body hover for better support */
body:hover ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Horizontal scrollbar */
::-webkit-scrollbar:horizontal {
    height: 6px;
    transition: height 0.35s ease;
}

body:hover ::-webkit-scrollbar:horizontal {
    height: 10px;
}

::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(
        90deg,
        var(--scrollbar-red-light) 0%,
        var(--scrollbar-red-mid) 40%,
        var(--scrollbar-red-dark) 70%,
        var(--scrollbar-red-maroon) 100%
    );
}

::-webkit-scrollbar-thumb:horizontal:hover {
    background: linear-gradient(
        90deg,
        var(--scrollbar-red-hover-light) 0%,
        var(--scrollbar-red-firebrick) 40%,
        var(--scrollbar-red-dark) 70%,
        var(--scrollbar-red-deeper) 100%
    );
}

/* ========================================
   FALLBACK & EXTRA SUPPORT
   ======================================== */

/* Internet Explorer & Legacy Edge */
body {
    -ms-overflow-style: scrollbar;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    html {
        scrollbar-color: var(--scrollbar-red-mid) var(--dark-neutral);
    }
    
    ::-webkit-scrollbar-track {
        background: var(--dark-neutral);
        box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1);
    }
    
    ::-webkit-scrollbar-thumb {
        border-color: var(--dark-neutral);
    }
    
    ::-webkit-scrollbar-corner {
        background: var(--dark-neutral);
    }
}

.scrollbar-ready ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-ready:hover ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}