/**
 * Global Scrollbar Styles
 * Apply scrollbar styling to elements with .scrollbar-gray or .scrollbar-blue class
 */

/* Gray Scrollbar */
.scrollbar-gray::-webkit-scrollbar {
    width: 5px !important;
}

.scrollbar-gray::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
    border-radius: 100px !important;
    box-sizing: content-box !important;
    width: 5px !important;
}

.scrollbar-gray::-webkit-scrollbar-thumb {
    background: #888888 !important;
    border-radius: 100px !important;
}

/* Ensure parent containers don't clip dropdown overflow */
.scrollbar-gray {
    overflow-x: visible !important;
}

.scrollbar-gray [data-more-actions-dropdown] {
    z-index: 50 !important;
}

/* Blue Scrollbar (for category menus) */
.scrollbar-blue::-webkit-scrollbar {
    width: 20px !important;
}

.scrollbar-blue::-webkit-scrollbar-track {
    background: #B2C8F2 !important;
    border-radius: 100px !important;
    box-sizing: border-box !important;
    border: 5px solid transparent !important;
    background-clip: padding-box !important;
}

.scrollbar-blue::-webkit-scrollbar-thumb {
    background: #0F52D4 !important;
    border-radius: 100px !important;
    border: 5px solid transparent !important;
    background-clip: padding-box !important;
    cursor: pointer;
}

/* Blue Scrollbar (for category menus) */
.scrollbar-blue-wide::-webkit-scrollbar {
    width: 8px !important;
}

.scrollbar-blue-wide::-webkit-scrollbar-track {
    background: #B2C8F2 !important;
    border-radius: 100px !important;
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    width: 8px !important;
}

.scrollbar-blue-wide::-webkit-scrollbar-thumb {
    background: #0F52D4 !important;
    border-radius: 100px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    cursor: pointer;
}