/**
 * Arrow Scroll Styles
 * Manual horizontal scrolling with left/right arrow buttons
 * 
 * Structure:
 * - .arrow-scroll = container with overflow-x: auto
 * - Children = scrollable content items
 * - .arrow-scroll-left = button to scroll left
 * - .arrow-scroll-right = button to scroll right
 * 
 * Button classes can be placed on any element (buttons, divs, etc.)
 */

.arrow-scroll {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none; /* Firefox */
	-webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.arrow-scroll::-webkit-scrollbar {
	display: none;
}

/* Container for the scrollable content */
.arrow-scroll > * {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30, 1rem);
}

/* Optional: Allow custom scroll amount via CSS variable */
.arrow-scroll {
	--arrow-scroll-amount: 300px;
}

/* Button styling - minimal defaults, user can override */
.arrow-scroll-left,
.arrow-scroll-right {
	cursor: pointer;
	user-select: none;
	transition: opacity 0.2s ease;
}

/* Disabled state when at scroll boundaries */
.arrow-scroll-left.disabled,
.arrow-scroll-right.disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.arrow-scroll {
		scroll-behavior: auto;
	}
}