@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Loading.razor.rz.scp.css */
.loading-container[b-ul4jm4kn5g] {
	display: flex;
	justify-content: center;
	margin-top: 15px;
	margin-bottom: 15px;
}

/* The loader takes the violet colourway of the admin logo and favicon; violet carries far enough
   on the dark admin surface to need no lighter variant. The body sits in the logo's own colour and
   the moving outline takes the same hue at full strength, which keeps the line the brightest thing
   on screen. */
.loading[b-ul4jm4kn5g] {
	--loading-brand: #7C3AED;
	/* The loader never fully clears the glyph: it rests at a barely-there tint of its own
	   colour, present enough to hold the shape, dim enough not to compete with the lit fill. */
	--loading-idle-opacity: .12;
}

.loading__text[b-ul4jm4kn5g] {
	display: block;
	margin-top: 15px;
	text-align: center;
}

.loading-logo[b-ul4jm4kn5g] {
	/* A square box, so the loader has the same footprint wherever it lands; the 187x212 glyph is
	   centred inside it by the SVG's default preserveAspectRatio. */
	width: 120px;
	height: 120px;
	/* The trace's glow reaches past the viewBox. */
	overflow: visible;
}

/* The outline draws itself on while the body fills in behind it, landing on the logo's own
   colour at full strength exactly as the trace closes. It then retraces itself backwards
   instead of ending, and the glyph never leaves the canvas: it rests at the idle tint that
   the fill rises out of and settles back into, so the loop has no blank beat. 4s cycle:
     0 -> 30%    outline draws, body rises off the idle ghost     (1200ms)
     30 -> 60%   full colour, outline retained                    (1200ms)
     60 -> 90%   outline retraces backwards, body settles back    (1200ms)
     90 -> 100%  idle: ghost body only                            (400ms)
   Reverse here means the offset climbs back to 100 the way it came, so the stroke's leading
   edge retreats along the path it just drew. Running it on to -100 instead would keep the
   edge moving forwards and read as a second wipe, not as an undo. */
.loading-logo__body[b-ul4jm4kn5g] {
	fill: var(--loading-brand);
	opacity: var(--loading-idle-opacity);
	animation: loading-trace-fill-b-ul4jm4kn5g 4s ease-in-out infinite;
}

.loading-logo__trace[b-ul4jm4kn5g] {
	fill: none;
	stroke: var(--loading-brand);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 100 100;
	filter: drop-shadow(0 0 5px var(--loading-brand));
	animation: loading-trace-draw-b-ul4jm4kn5g 4s ease-in-out infinite;
}

@keyframes loading-trace-fill-b-ul4jm4kn5g {
	0%, 14% {
		opacity: var(--loading-idle-opacity);
	}

	30%, 60% {
		opacity: 1;
	}

	80%, 100% {
		opacity: var(--loading-idle-opacity);
	}
}

/* The draw fades the outline up from opacity 0 over the first 5% rather than starting it
   opaque. At dashoffset 100 the dash pattern's gap covers the whole path, but stroke-linecap:
   round still renders a cap dot where the dash boundary lands, so an opaque start popped a
   bead of colour onto the canvas for a frame at every loop. Starting transparent hides it.
   The end is mirrored, so the stroke is gone before the cap dot shows. The 5% keyframe
   deliberately omits stroke-dashoffset - leaving it out lets the offset interpolate straight
   through from 0% to 30%, so the draw keeps one continuous eased sweep instead of stuttering
   at the fade-in boundary. */
@keyframes loading-trace-draw-b-ul4jm4kn5g {
	0% {
		stroke-dashoffset: 100;
		opacity: 0;
	}

	5% {
		opacity: 1;
	}

	30% {
		stroke-dashoffset: 0;
	}

	60% {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	90% {
		stroke-dashoffset: 100;
		opacity: 0;
	}

	100% {
		stroke-dashoffset: 100;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.loading-logo__body[b-ul4jm4kn5g] {
		animation: none;
		opacity: 1;
	}

	.loading-logo__trace[b-ul4jm4kn5g] {
		animation: none;
		stroke-dashoffset: 0;
		opacity: 1;
	}
}