/**
 * "Carousel" style.
 *
 * Built on native horizontal scrolling with scroll snapping, so a finger
 * swipe, a trackpad gesture and the keyboard all work without any script.
 * The buttons only add a convenience on top of behaviour the browser
 * already provides, which is why the carousel still works if the script
 * fails to load.
 */

.wpau-reviews--carrousel {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	position: relative;
}

.wpau-carrousel__track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	padding: 0.25rem 0.25rem 1rem;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.wpau-carrousel__track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.wpau-carrousel__slide {
	flex: 0 0 min(360px, 82%);
	scroll-snap-align: start;
}

.wpau-carrousel__slide .wpau-review {
	height: 100%;
}

.wpau-carrousel__arrow {
	align-items: center;
	background: #fff;
	border: 1px solid var(--wpau-border, #e3e3e3);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	flex: none;
	font-size: 1.5rem;
	height: 2.5rem;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 2.5rem;
}

.wpau-carrousel__arrow:hover {
	background: #f6f6f6;
}

.wpau-carrousel__arrow[disabled] {
	cursor: default;
	opacity: 0.35;
}

/* Readers who ask for less motion get an instant jump instead of a glide. */
@media (prefers-reduced-motion: reduce) {
	.wpau-carrousel__track {
		scroll-behavior: auto;
	}
}

/* On a phone the arrows take room the thumb does not need: swiping is enough. */
@media (max-width: 640px) {
	.wpau-carrousel__arrow {
		display: none;
	}

	.wpau-carrousel__slide {
		flex-basis: 88%;
	}
}