/*
  Shiny border glow effect
  */

[data-glow-border] {
	--base: 333;
	--border-size: calc(var(--border, 2) * 1px);
	--spotlight-size: calc(var(--size, 150) * 1px);
	--hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));
	background-image: radial-gradient(
		var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
		hsl(
			var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 70) * 1%) /
				var(--bg-spot-opacity, 0.1)
		),
		transparent
	);
	border-radius: 20px;
	background-color: var(--backdrop, transparent);
	background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
	background-position: 50% 50%;
	background-attachment: fixed;
	border: var(--border-size) solid var(--backup-border);
	position: relative;
	touch-action: none;
}

[data-glow-border]::before,
[data-glow-border]::after {
	border-radius: 20px;
	pointer-events: none;
	content: '';
	position: absolute;
	inset: calc(var(--border-size) * -1);
	border: var(--border-size) solid transparent;
	background-attachment: fixed;
	background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
	background-repeat: no-repeat;
	background-position: 50% 50%;
	mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
	mask-clip: padding-box, border-box;
	mask-composite: intersect;
}

/* This is the emphasis light */
[data-glow-border]::before {
	border-radius: 20px;
	background-image: radial-gradient(
		calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at calc(var(--x, 0) * 1px)
			calc(var(--y, 0) * 1px),
		hsl(
			var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) /
				var(--border-spot-opacity, 1)
		),
		transparent 100%
	);
	filter: brightness(2);
}
/* This is the spotlight */
[data-glow-border]::after {
	background-image: radial-gradient(
		calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at calc(var(--x, 0) * 1px)
			calc(var(--y, 0) * 1px),
		hsl(0 100% 100% / var(--border-light-opacity, 1)),
		transparent 100%
	);
}
[data-glow-border] [data-glow-border] {
	position: absolute;
	inset: 0;
	will-change: filter;
	opacity: var(--outer, 1);
}
[data-glow-border] > [data-glow-border] {
	border-radius: 20px;
	border-width: calc(var(--border-size) * 20);
	filter: blur(calc(var(--border-size) * 10));
	background: none;
	pointer-events: none;
}
[data-glow-border] > [data-glow-border]::before {
	inset: -10px;
	border-width: 10px;
}
[data-glow-border] [data-glow-border] {
	border: none;
}
