/**
 * Reusable Mahis Commerce carousel.
 */

.mc-carousel {
	--mc-carousel-gap: var(--mc-space-md);
	--mc-carousel-slide-size: 84%;

	position: relative;
}

.mc-carousel__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.mc-carousel:not(.is-ready) .mc-carousel__viewport {
	overflow-x: auto;
	touch-action: pan-x pan-y;
	scroll-snap-type: inline mandatory;
}

.mc-carousel:not(.is-ready) .mc-carousel__slide {
	scroll-snap-align: center;
}

.mc-carousel:not(.is-ready) .mc-carousel__control,
.mc-carousel:not(.is-ready) .mc-carousel__dots {
	display: none;
}

.mc-carousel__track {
	display: flex;
	gap: var(--mc-carousel-gap);
	align-items: stretch;
	width: 100%;
	padding-inline: calc((100% - var(--mc-carousel-slide-size)) / 2);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.mc-carousel__slide {
	flex: 0 0 var(--mc-carousel-slide-size);
	min-width: 0;
	opacity: 0.62;
	transform: scale(0.96);
	transition:
		opacity 420ms ease,
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mc-carousel__slide.is-active {
	opacity: 1;
	transform: scale(1);
}

.mc-carousel--single .mc-carousel__slide {
	flex-basis: 100%;
	opacity: 1;
	transform: none;
}

.mc-carousel--single .mc-carousel__track {
	padding-inline: 0;
}

.mc-carousel.is-dragging {
	cursor: grabbing;
}

.mc-carousel.is-dragging .mc-carousel__track,
.mc-carousel.is-jumping .mc-carousel__track {
	transition: none;
}

.mc-carousel__control {
	position: absolute;
	z-index: 2;
	inset-block-start: 50%;
	display: grid;
	width: var(--mc-space-2xl);
	height: var(--mc-space-2xl);
	padding: 0;
	color: var(--mc-color-text-primary);
	font-size: var(--mc-font-size-2xl);
	cursor: pointer;
	background: rgb(255 255 255 / 0.88);
	border: 1px solid var(--mc-color-border);
	border-radius: var(--mc-radius-full);
	box-shadow: var(--mc-shadow-small);
	transform: translateY(-50%);
	place-items: center;
}

.mc-carousel__control--previous {
	inset-inline-start: var(--mc-space-sm);
}

.mc-carousel__control--next {
	inset-inline-end: var(--mc-space-sm);
}

.mc-carousel__dots {
	display: flex;
	gap: var(--mc-space-sm);
	justify-content: center;
	margin-block-start: var(--mc-space-md);
}

.mc-carousel__dot {
	width: var(--mc-space-sm);
	height: var(--mc-space-sm);
	padding: 0;
	cursor: pointer;
	background: var(--mc-color-text-secondary);
	border: 0;
	border-radius: var(--mc-radius-full);
	opacity: 0.35;
}

.mc-carousel__dot[aria-current="true"] {
	opacity: 1;
}

.mc-carousel__control:focus-visible,
.mc-carousel__dot:focus-visible {
	outline: 2px solid var(--mc-color-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mc-carousel__track,
	.mc-carousel__slide {
		transition: none;
	}
}