// Credits: https: //kennethnym.com/blog/progressive-blur-in-css/

.lqd-progressive-blur-filter {
	--base-val: 1;

	&:nth-child(1) {
		backdrop-filter: blur(calc(var(--base-val) * 1px));
		mask: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 40%);
	}

	&:nth-child(2) {
		backdrop-filter: blur(calc(var(--base-val) * 2px));
		mask: linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 50%);
	}

	&:nth-child(3) {
		backdrop-filter: blur(calc(var(--base-val) * 4px));
		mask: linear-gradient(rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 60%);
	}

	&:nth-child(4) {
		backdrop-filter: blur(calc(var(--base-val) * 8px));
		mask: linear-gradient(rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 70%);
	}

	&:nth-child(5) {
		backdrop-filter: blur(calc(var(--base-val) * 16px));
		mask: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 90%);
	}

	&:nth-child(6) {
		backdrop-filter: blur(calc(var(--base-val) * 32px));
		mask: linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 80%);
	}

	&:nth-child(7) {
		z-index: 10;
		backdrop-filter: blur(calc(var(--base-val) * 64px));
		mask: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
	}
}

.lqd-progressive-blur-gradient {
	// background: linear-gradient(transparent, hsl(var(--background)/50%));
}