/**
 * Owrang SPA Engine frontend styles.
 */

:root {
	--owrang-spa-transition-duration: 160ms;
	--owrang-spa-progress: 0%;
}

.owrang-spa-progress {
	position: fixed;
	z-index: 2147483646;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 3px;
	pointer-events: none;
	opacity: 0;
	transform: translateZ(0);
	transition: opacity 160ms ease;
}

.owrang-spa-progress > span {
	display: block;
	width: var(--owrang-spa-progress);
	height: 100%;
	background: #2271b1;
	box-shadow: 0 0 10px rgba(34, 113, 177, 0.55);
	transition: width 320ms ease;
}

.owrang-spa-progress.is-visible {
	opacity: 1;
}

.owrang-spa-progress.is-complete {
	opacity: 0;
	transition-delay: 120ms;
}

.owrang-spa-progress.is-error > span {
	background: #b32d2e;
	box-shadow: 0 0 10px rgba(179, 45, 46, 0.5);
}

body.admin-bar .owrang-spa-progress {
	top: 32px;
}

.owrang-spa-leaving,
.owrang-spa-entering,
.owrang-spa-transitioning {
	will-change: opacity;
}

.owrang-spa-transitioning {
	transition: opacity var(--owrang-spa-transition-duration) ease;
}

.owrang-spa-leaving {
	opacity: 0;
	transition: opacity var(--owrang-spa-transition-duration) ease;
}

.owrang-spa-entering {
	opacity: 0;
}

.owrang-spa-live-region {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.owrang-spa-is-loading {
	cursor: progress;
}

@media screen and (max-width: 782px) {
	body.admin-bar .owrang-spa-progress {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.owrang-spa-progress,
	.owrang-spa-progress > span,
	.owrang-spa-leaving,
	.owrang-spa-entering,
	.owrang-spa-transitioning {
		transition: none !important;
	}
}