/**
 * Full-page AJAX loader.
 *
 * Deliberately neutral and low-specificity so a generated project can restyle it from its own SCSS
 * without !important. Override any of the custom properties on :root, or restyle
 * #spinx-ajax-loader / .spinx-ajax-loader__spinner directly.
 *
 * @package SPINX_Digital
 */

:root {
	--spinx-loader-bg: rgba(255, 255, 255, 0.82);
	--spinx-loader-color: #0f172a;
	--spinx-loader-size: 44px;
	--spinx-loader-thickness: 3px;
	--spinx-loader-speed: 0.7s;
	--spinx-loader-z: 99999;
}

.spinx-ajax-loader {
	position: fixed;
	inset: 0;
	z-index: var(--spinx-loader-z);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--spinx-loader-bg);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.spinx-ajax-loader.is-visible {
	opacity: 1;
	visibility: visible;
}

.spinx-ajax-loader__spinner {
	width: var(--spinx-loader-size);
	height: var(--spinx-loader-size);
	border: var(--spinx-loader-thickness) solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--spinx-loader-color);
	opacity: 0.75;
	animation: spinx-loader-spin var(--spinx-loader-speed) linear infinite;
}

/* Visible to assistive technology, invisible on screen. */
.spinx-ajax-loader__text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* While a request is in flight the page must not scroll under the overlay. */
html.spinx-ajax-busy {
	overflow: hidden;
}

@keyframes spinx-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.spinx-ajax-loader {
		transition: none;
	}

	.spinx-ajax-loader__spinner {
		animation-duration: 2.4s;
	}
}