.scroll-carousel.dragging .scroll-carousel-item {
    pointer-events: none;
    user-select: none;
}

.scroll-carousel.dragging {
    cursor: grab;
}

.scroll-carousel {
    padding: 20px;
    margin: -20px;
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    will-change: scroll-position;
}

.scroll-carousel::-webkit-scrollbar {
    display: none;
}

.scroll-carousel-nav .next-btn,
.scroll-carousel-nav .prev-btn{
    font-size: 0px;
    transition: .3s;
    &.hidden{
        opacity: 0.5;
        pointer-events: none;
    }
}

.scroll-carousel-progress {
    width: 100%;
    height: 4px;
    background: #eee;
    margin-top: 10px;
    border-radius: 2px;
    overflow: hidden;
}

.scroll-carousel-progress-fill {
    height: 100%;
    background: #007bff;
    width: 0%;
    transition: width 0.2s ease;
    border-radius: 2px;
}