.pixel-carousel-edge-fade {
	--pixel-carousel-fade-width: 80px;
	--pixel-carousel-fade-strength: 1;
	--pixel-carousel-fade-bg: transparent;
	position: relative;
}

.pixel-carousel-edge-fade .flickity-viewport {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.pixel-carousel-edge-fade.pixel-carousel-fade-mask.pixel-carousel-fade-both .flickity-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 0,
		#000 var(--pixel-carousel-fade-width),
		#000 calc(100% - var(--pixel-carousel-fade-width)),
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 100%
	);
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 0,
		#000 var(--pixel-carousel-fade-width),
		#000 calc(100% - var(--pixel-carousel-fade-width)),
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 100%
	);
}

.pixel-carousel-edge-fade.pixel-carousel-fade-mask.pixel-carousel-fade-left .flickity-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 0,
		#000 var(--pixel-carousel-fade-width),
		#000 100%
	);
	mask-image: linear-gradient(
		to right,
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 0,
		#000 var(--pixel-carousel-fade-width),
		#000 100%
	);
}

.pixel-carousel-edge-fade.pixel-carousel-fade-mask.pixel-carousel-fade-right .flickity-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - var(--pixel-carousel-fade-width)),
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 100%
	);
	mask-image: linear-gradient(
		to right,
		#000 0,
		#000 calc(100% - var(--pixel-carousel-fade-width)),
		rgba(0, 0, 0, calc(1 - var(--pixel-carousel-fade-strength))) 100%
	);
}

.pixel-carousel-edge-fade::before,
.pixel-carousel-edge-fade::after {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 3;
	width: var(--pixel-carousel-fade-width);
	pointer-events: none;
}

.pixel-carousel-edge-fade.pixel-carousel-fade-mode-overlay.pixel-carousel-fade-left::before,
.pixel-carousel-edge-fade.pixel-carousel-fade-mode-overlay.pixel-carousel-fade-both::before {
	content: "";
	left: 0;
	background: linear-gradient(to right, var(--pixel-carousel-fade-bg), transparent);
	opacity: var(--pixel-carousel-fade-strength);
}

.pixel-carousel-edge-fade.pixel-carousel-fade-mode-overlay.pixel-carousel-fade-right::after,
.pixel-carousel-edge-fade.pixel-carousel-fade-mode-overlay.pixel-carousel-fade-both::after {
	content: "";
	right: 0;
	background: linear-gradient(to left, var(--pixel-carousel-fade-bg), transparent);
	opacity: var(--pixel-carousel-fade-strength);
}

@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
	.pixel-carousel-edge-fade.pixel-carousel-fade-mode-auto.pixel-carousel-fade-left::before,
	.pixel-carousel-edge-fade.pixel-carousel-fade-mode-auto.pixel-carousel-fade-both::before {
		content: "";
		left: 0;
		background: linear-gradient(to right, var(--pixel-carousel-fade-bg), transparent);
		opacity: var(--pixel-carousel-fade-strength);
	}

	.pixel-carousel-edge-fade.pixel-carousel-fade-mode-auto.pixel-carousel-fade-right::after,
	.pixel-carousel-edge-fade.pixel-carousel-fade-mode-auto.pixel-carousel-fade-both::after {
		content: "";
		right: 0;
		background: linear-gradient(to left, var(--pixel-carousel-fade-bg), transparent);
		opacity: var(--pixel-carousel-fade-strength);
	}
}