/* ===========================
   BanterBox Global Styles
   =========================== */

/* ===========================
   CUSTOM SCROLLBAR STYLES
   =========================== */

/* Default dark theme scrollbars */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;  /* Vertical scrollbar width */
    height: 8px; /* Horizontal scrollbar height */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Even more subtle scrollbars for specific containers */
.content-container::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.dropdown-content::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

.content-container:hover::-webkit-scrollbar-thumb,
.modal-content:hover::-webkit-scrollbar-thumb,
.dropdown-content:hover::-webkit-scrollbar-thumb,
textarea:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* Hide scrollbar until hover for certain elements */
.auto-hide-scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
}

.auto-hide-scrollbar:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* ===========================
   GLOBAL UTILITY CLASSES
   =========================== */

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

/* Hide scrollbar completely */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* Thin scrollbar option */
.thin-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Custom scrollbar colors for specific themes */
.dark-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.light-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
}

/* Scrollbar for code blocks and pre elements */
pre::-webkit-scrollbar,
code::-webkit-scrollbar {
    height: 6px;
}

pre::-webkit-scrollbar-thumb,
code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

/* ===========================
   RESPONSIVE SCROLLBAR STYLES
   =========================== */

/* On mobile, make scrollbars even thinner */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    
    /* Hide scrollbars on mobile unless actively scrolling */
    .mobile-hide-scrollbar::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
    
    .mobile-hide-scrollbar:hover::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* ===========================
   DARK MODE OVERRIDES
   =========================== */

@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
    }
    
    * {
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    }
}

/* ===========================
   LIGHT MODE OVERRIDES
   =========================== */

@media (prefers-color-scheme: light) {
    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.2);
    }
    
    ::-webkit-scrollbar-thumb:active {
        background: rgba(0, 0, 0, 0.3);
    }
    
    * {
        scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
    }
}