/*
 * The canvas has to sit under the header's tint, but a stacking context paints its own
 * background below negative-z children. So while the WebGL glass runs, the tint moves
 * into ::before. Override the --dn-glass-* properties for other headers.
 */
.dn-glass-canvas {
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	display: none;
	pointer-events: none;
}

.dn-glass-on {
	isolation: isolate;
	background: none !important;
	box-shadow: var(--dn-glass-outer-shadow, 0 12px 30px rgb(0 0 0 / 0.55)) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.dn-glass-on::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 0 -1px;
	pointer-events: none;
	border-bottom: var(--dn-glass-border, 1px solid rgb(255 255 255 / 0.0735));
	background: var(--dn-glass-tint, radial-gradient(60% 130% at 50% 0%, rgb(255 255 255 / 0.084), transparent 70%), rgb(10 10 10 / 0.665));
	box-shadow: var(--dn-glass-inset, inset 0 1px 0 rgb(255 255 255 / 0.147), inset 0 -1px 0 rgb(140 220 255 / 0.0735));
}

.dn-glass-on > .dn-glass-canvas {
	display: block;
}