@use 'sass:map';
@use 'sass:string';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/breakpoints' as break;

.carousel {
	position: relative;
	perspective: 6.25rem;
	margin-left: string.unquote('-#{var(--padding-huge)}');
	margin-right: string.unquote('-#{var(--padding-huge)}');

	ol,
	ul,
	li {
		list-style: none;
		margin: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.carousel-wrapper {
		display: flex;
		gap: var(--padding-large);
		overflow: scroll hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
	}

	.carousel-slide {
		position: relative;
		flex: 0 0 60%;
		width: 60%;

		&:first-of-type {
			margin-left: 50%;
		}

		&:last-of-type {
			margin-right: 50%;
		}

		@include break.max-mobile {
			flex: 0 0 90%;
			width: 90%;
		}
	}

	.carousel-snap {
		scroll-snap-align: center;
	}

	* {
		box-sizing: border-box;
		scrollbar-color: transparent transparent;
		scrollbar-width: 0;
		-ms-overflow-style: none;

		&::-webkit-scrollbar {
			width: 0;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background: transparent;
			border: none;
		}
	}

	@include break.max-mobile {
		margin-left: string.unquote('-#{var(--padding-small)}');
		margin-right: string.unquote('-#{var(--padding-small)}');
	}
}