@property --mask-color-start {
	inherits: false;
	syntax: "<color>";
	initial-value: #000;
}

@property --mask-color-end {
	inherits: false;
	syntax: "<color>";
	initial-value: #000;
}

@keyframes scroll-mask {
	0% {
		--mask-color-start: #000;
		--mask-color-end: hsl(0 0 0 / 0%);
	}

	2%,
	98% {
		--mask-color-start: hsl(0 0 0 / 0%);
		--mask-color-end: hsl(0 0 0 / 0%);
	}

	100% {
		--mask-color-start: hsl(0 0 0 / 0%);
		--mask-color-end: #000;
	}
}

.scroll-mask {
	--mask-dir: 90deg;
	--mask-size: 1.5rem;
	--mask-color-start: #000;
	--mask-color-end: #000;
	--mask: linear-gradient(
		var(--mask-dir),
		var(--mask-color-start),
		#000 var(--mask-size),
		#000 calc(100% - var(--mask-size)),
		var(--mask-color-end)
	);
	// stylelint-disable-next-line property-no-vendor-prefix
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	animation: scroll-mask;
	animation-timeline: scroll(self inline);

	&.scroll-y {
		--mask-dir: 180deg;
		animation-timeline: scroll(self block);
	}
}