/**
 * InfiniteScrollCarousel CSS
 * 
 * Minimal styles required for the infinite scroll carousel component.
 * These styles handle overflow, positioning, and fade gradients.
 */

/* Wrapper: Handles overflow and fade gradients */
.infinite-scroll-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Container: The scrolling element */
.infinite-scroll-container {
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    cursor: grab;
    will-change: transform;
}

/* Items: Direct children of the container */
.infinite-scroll-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Fade gradients on left and right edges */
.infinite-scroll-wrapper::before,
.infinite-scroll-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: var(--fade-width, 50px);
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.infinite-scroll-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 1), transparent);
}

.infinite-scroll-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 1), transparent);
}

/* Customize fade gradient colors using CSS variables */
.infinite-scroll-wrapper[data-fade-color]::before {
    background: var(--fade-gradient-left, linear-gradient(to right, rgba(0, 0, 0, 1), transparent));
}

.infinite-scroll-wrapper[data-fade-color]::after {
    background: var(--fade-gradient-right, linear-gradient(to left, rgba(0, 0, 0, 1), transparent));
}

/* Cursor states */
.infinite-scroll-container:active {
    cursor: grabbing;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .infinite-scroll-wrapper {
        overflow: hidden;
        width: 100%;
    }
    
    .infinite-scroll-container {
        /* Ensure container is wide enough for smooth scrolling */
        min-width: 300%;
    }
    
    .infinite-scroll-item {
        flex-shrink: 0;
    }
}