<template>
	<div class="carousel__wrapper">
		<Carousel v-bind="carouselSettings">
			<slot />
			<template #addons>
				<Navigation />
			</template>
		</Carousel>
	</div>
</template>

<script setup>
import "vue3-carousel/dist/carousel.css";
import { Carousel, Navigation } from "vue3-carousel";

const carouselSettings = {
	itemsToShow: 1,
	wrapAround: false,
	transition: 360,
	autoplay: false,
	gap: 20,
	mouseDrag: false,
	touchDrag: true,
	breakpoints: {
		990: {
			mouseDrag: false,
			touchDrag: true,
			itemsToShow: 4,
			snapAlign: "start",
			gap: 40,
			pauseAutoplayOnHover: true
		}
	}
};
</script>

<style>
.carousel__prev,
.carousel__next {
	@apply w-24 h-24 absolute right-auto bottom-0 top-auto rounded-full hover:shadow-sm hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 ring-gray-500 focus:ring-offset-2 bg-gray-200 bg-opacity-70 text-gray-400 text-sm transition-colors scale-75 font-bold;
	left: min(7rem, calc(100% - 6rem));
}

.carousel__prev {
	@apply left-0;
}

.carousel__viewport {
	@apply overflow-hidden;
}

.carousel__wrapper {
	.carousel__viewport {
		@apply pb-28;
	}
}
</style>
