:root {
    /* Brand Greens (Constant) */
    --brand-green: #28a745;
    --brand-green-hover: #218838;
}

.scrollable-container {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;

    /* Firefox Support */
    scrollbar-width: thin;
    scrollbar-color: var(--brand-green) var(--scroll-track);
}

/* Chrome, Edge, Safari, and Opera Support */
.scrollable-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollable-container::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 10px;
}

.scrollable-container::-webkit-scrollbar-thumb {
    background: var(--brand-green);
    border-radius: 20px;
    /* This creates a small padding effect around the green bar */
    border: 1px solid var(--scroll-track);
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
    background: var(--brand-green-hover);
}

@media (max-width: 768px) {
    .scrollable-container::-webkit-scrollbar {
        width: 4px;
    }
}