@layer components {
	[data-klt-carousel] {
		--klt-carousel-item-size: var(--klt-carousel-configured-item-size, minmax(min(20rem, 82vw), 1fr));
	}

	[data-klt-carousel] [data-klt-carousel-track] {
		gap: var(--klt-carousel-gap, var(--klt-space-m));
		scroll-behavior: smooth;
		scrollbar-gutter: stable;
	}

	[data-klt-carousel][data-klt-carousel-direction="horizontal"] [data-klt-carousel-track] {
		display: grid;
		grid-template-columns: none;
		grid-auto-columns: var(--klt-carousel-item-size);
		grid-auto-flow: column;
		overflow-x: auto;
		scroll-snap-type: inline mandatory;
		touch-action: pan-x pan-y;
	}

	[data-klt-carousel][data-klt-carousel-direction="vertical"] [data-klt-carousel-track] {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		overflow-y: auto;
		scroll-snap-type: block mandatory;
		touch-action: pan-x pan-y;
	}

	[data-klt-carousel] [data-klt-carousel-slide] {
		min-width: 0;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* The head marks JavaScript support before CSS is parsed. Controls can then
	 * occupy their final geometry on the first paint while `hidden` remains the
	 * honest no-script fallback. The behaviour removes the attribute on bind. */
	:root[data-klt-js="enabled"] [data-klt-carousel-navigation][hidden] {
		display: flex;
	}

	.klt-carousel__navigation,
	.klt-carousel__status,
	.klt-carousel__controls,
	.klt-carousel__dots {
		display: flex;
		align-items: center;
	}

	.klt-carousel__navigation {
		gap: var(--klt-space-m);
		justify-content: space-between;
		margin-block-start: var(--klt-space-s);
	}

	.klt-carousel__status {
		flex: 1;
		gap: var(--klt-space-s);
	}

	.klt-carousel__count {
		flex: 0 0 auto;
	}

	.klt-carousel__progress {
		position: relative;
		display: block;
		width: 100%;
		height: 0.25rem;
		overflow: hidden;
	}

	.klt-carousel__progress-value {
		display: block;
		width: var(--klt-carousel-progress, 0%);
		height: 100%;
		transition: width 190ms ease-out;
	}

	.klt-carousel__controls,
	.klt-carousel__dots {
		flex: 0 0 auto;
		gap: var(--klt-space-xs);
	}

	.klt-carousel__control {
		display: grid;
		place-items: center;
		line-height: 1;
	}

	.klt-carousel__control-icon {
		display: block;
		width: 1rem;
		height: 1rem;
		background: currentcolor;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
	}

	.klt-carousel__control-icon--previous {
		-webkit-mask-image: url("../../svg/ui/move-left.svg");
		mask-image: url("../../svg/ui/move-left.svg");
	}

	.klt-carousel__control-icon--next {
		-webkit-mask-image: url("../../svg/ui/move-right.svg");
		mask-image: url("../../svg/ui/move-right.svg");
	}

	[data-klt-carousel][data-klt-carousel-direction="vertical"] .klt-carousel__control-icon--previous {
		-webkit-mask-image: url("../../svg/ui/chevron-up.svg");
		mask-image: url("../../svg/ui/chevron-up.svg");
	}

	[data-klt-carousel][data-klt-carousel-direction="vertical"] .klt-carousel__control-icon--next {
		-webkit-mask-image: url("../../svg/ui/chevron-down.svg");
		mask-image: url("../../svg/ui/chevron-down.svg");
	}

	.klt-carousel__dot[aria-current="page"] {
		text-decoration: underline;
	}

	@media (max-width: 60rem) {
		[data-klt-carousel][data-klt-carousel-direction="horizontal"][data-klt-carousel-visible="1"] {
			--klt-carousel-item-size: 100%;
		}

		[data-klt-carousel][data-klt-carousel-direction="horizontal"]:not([data-klt-carousel-visible="1"]) {
			--klt-carousel-item-size: calc((100% - var(--klt-carousel-gap)) / 2);
		}
	}

	@media (max-width: 40rem) {
		[data-klt-carousel][data-klt-carousel-direction="horizontal"] {
			--klt-carousel-item-size: 100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		[data-klt-carousel] [data-klt-carousel-track] {
			scroll-behavior: auto;
		}

		.klt-carousel__progress-value {
			transition: none;
		}
	}
}