/*
 * Global scrollbar classes (no wrapper needed).
 * .ld-scrollbar: thin themed scrollbar for any scrollable element (set the overflow yourself).
 * .ld-scroll: vertical scrolling list; add a max-height (class or style) to the element.
 * Colors follow Bootstrap variables, so light and dark themes work without extra rules.
 */

.ld-scrollbar,
.ld-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--bs-border-color) transparent;
}

.ld-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .25rem;
}

    .ld-scrollbar::-webkit-scrollbar,
    .ld-scroll::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .ld-scrollbar::-webkit-scrollbar-track,
    .ld-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .ld-scrollbar::-webkit-scrollbar-thumb,
    .ld-scroll::-webkit-scrollbar-thumb {
        background-color: var(--bs-border-color);
        border-radius: 999px;
    }

        .ld-scrollbar::-webkit-scrollbar-thumb:hover,
        .ld-scroll::-webkit-scrollbar-thumb:hover {
            background-color: var(--bs-secondary-color);
        }