/*
 * AJAX Loading – front-end styles (loading indicators, page transitions, a11y helpers).
 *
 * Every class is namespaced (ajxl-) and selectors stay at one or two classes, so themes can
 * override anything. Only opacity and transform are animated. html/body are never restyled
 * beyond the optional cursor hook below.
 *
 * Custom properties (set inline by loader.js / transitions.js, overridable with !important):
 *   --ajxl-color, --ajxl-bg, --ajxl-size, --ajxl-ring, --ajxl-bar-height, --ajxl-speed,
 *   --ajxl-overlay-opacity, --ajxl-z, --ajxl-progress, --ajxl-sticky-top        (loader)
 *   --ajxl-duration, --ajxl-easing, --ajxl-delay, --ajxl-origin-y               (transitions)
 */

/* Visually hidden but announced (aria-live region). */
.ajxl-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* html.ajxl-navigating: theme hook while a navigation is in flight (nothing layout-changing). */
.ajxl-navigating {
	cursor: progress;
}

/* ---------------------------------------------------------------- Page transitions */

.ajxl-tr {
	transition-property: opacity, transform;
	transition-duration: var(--ajxl-duration, 250ms);
	transition-timing-function: var(--ajxl-easing, ease);
	transition-delay: var(--ajxl-delay, 0ms);
}

/* The enter "from" state is applied without a transition. */
.ajxl-tr.ajxl-enter {
	transition: none;
}

.ajxl-tr[data-ajxl-tr="scale"] {
	transform-origin: 50% var(--ajxl-origin-y, 50%);
}

.ajxl-leave[data-ajxl-tr="fade"],
.ajxl-leave[data-ajxl-tr="fade-through"],
.ajxl-enter[data-ajxl-tr="fade"],
.ajxl-enter[data-ajxl-tr="fade-through"] {
	opacity: 0;
}

.ajxl-leave[data-ajxl-tr="smooth"],
.ajxl-enter[data-ajxl-tr="smooth"] {
	opacity: .6;
}

.ajxl-leave[data-ajxl-tr="slide-left"],
.ajxl-enter[data-ajxl-tr="slide-right"] {
	opacity: 0;
	transform: translate3d(-24px, 0, 0);
}

.ajxl-leave[data-ajxl-tr="slide-right"],
.ajxl-enter[data-ajxl-tr="slide-left"] {
	opacity: 0;
	transform: translate3d(24px, 0, 0);
}

.ajxl-leave[data-ajxl-tr="slide-up"],
.ajxl-enter[data-ajxl-tr="slide-down"] {
	opacity: 0;
	transform: translate3d(0, -24px, 0);
}

.ajxl-leave[data-ajxl-tr="slide-down"],
.ajxl-enter[data-ajxl-tr="slide-up"] {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
}

.ajxl-leave[data-ajxl-tr="scale"],
.ajxl-enter[data-ajxl-tr="scale"] {
	opacity: 0;
	transform: scale(.98);
}

/*
 * Set by transitions.js on one ancestor of a container while a horizontal slide runs, so the
 * 24px offset never makes the page scroll sideways. `clip` (unlike `hidden`) creates no scroll
 * container or formatting context: position: sticky and the layout are unaffected. Browsers
 * without `overflow: clip` ignore it.
 */
.ajxl-clip-x {
	overflow-x: clip !important;
}

/*
 * The same on an ancestor that is a horizontal scroll container (overflow-x: auto, e.g. a wrapper
 * that lets wide tables scroll): `hidden` keeps it a scroll container and formatting context, while
 * `clip` would undo both when overflow-y is not set (sticky children would jump, floats spill out).
 */
.ajxl-clip-x-scroll {
	overflow-x: hidden !important;
}

/* ---------------------------------------------------------------- Loader: shared */

.ajxl-loader {
	all: unset; /* Shield from theme rules such as `body > div { max-width: … }`. */
	position: fixed;
	z-index: var(--ajxl-z, 99999);
	display: block;
	box-sizing: border-box;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	opacity: 0;
	transition: opacity .2s ease;
}

/* Same shield for our inner elements (theme `span`/`img` rules); each part sets its own display. */
.ajxl-loader *,
.ajxl-loader *::before,
.ajxl-loader *::after {
	all: unset;
	box-sizing: border-box;
}

.ajxl-is-visible {
	opacity: 1;
}

/* Admin live preview: confined to the preview root. */
.ajxl-is-preview {
	position: absolute;
}

/* ---------------------------------------------------------------- Loader: bar */

.ajxl-loader--bar {
	top: 0;
	right: 0;
	left: 0;
	height: calc(var(--ajxl-bar-height, 3px) + 10px); /* Room for the glow. */
	overflow: hidden;
}

.ajxl-loader--bottom {
	top: auto;
	bottom: 0;
}

.ajxl-loader__bar {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: var(--ajxl-bar-height, 3px);
	background: var(--ajxl-color, #2271b1);
	transform: translate3d(calc((var(--ajxl-progress, 0) - 1) * 100%), 0, 0);
	transition: transform calc(var(--ajxl-speed, 900ms) / 4) ease-out;
}

.ajxl-loader__bar::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 96px;
	max-width: 100%;
	height: 100%;
	box-shadow: 0 0 10px var(--ajxl-color, #2271b1), 0 0 4px var(--ajxl-color, #2271b1);
	opacity: .8;
}

.ajxl-loader--bottom .ajxl-loader__bar {
	top: auto;
	bottom: 0;
}

[dir="rtl"] .ajxl-loader__bar {
	right: 0;
	left: auto;
	transform: translate3d(calc((1 - var(--ajxl-progress, 0)) * 100%), 0, 0);
}

[dir="rtl"] .ajxl-loader__bar::after {
	right: auto;
	left: 0;
}

/* ---------------------------------------------------------------- Loader: positioned types */

.ajxl-loader--spinner,
.ajxl-loader--text,
.ajxl-loader--logo,
.ajxl-loader--overlay {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	padding: 20px;
}

.ajxl-loader__box {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	margin: auto;
	transform: scale(.92);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}

.ajxl-is-visible .ajxl-loader__box {
	transform: none;
}

/* Physical corners via auto margins, independent of the document direction. */
.ajxl-loader--top-left > .ajxl-loader__box {
	margin: 0 auto auto 0;
}

.ajxl-loader--top-right > .ajxl-loader__box {
	margin: 0 0 auto auto;
}

.ajxl-loader--bottom-left > .ajxl-loader__box {
	margin: auto auto 0 0;
}

.ajxl-loader--bottom-right > .ajxl-loader__box {
	margin: auto 0 0 auto;
}

/* Floating plate behind the spinner/logo keeps it legible over any content. */
.ajxl-loader--spinner .ajxl-loader__box,
.ajxl-loader--logo .ajxl-loader__box {
	padding: calc(var(--ajxl-size, 40px) * .25);
	border-radius: 50%;
	background: var(--ajxl-bg, #fff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
}

.ajxl-loader--logo .ajxl-loader__box {
	border-radius: 16px;
}

/* ---------------------------------------------------------------- Loader: spinner */

.ajxl-loader__spinner {
	display: block;
	flex: none;
	width: var(--ajxl-size, 40px);
	height: var(--ajxl-size, 40px);
	border: var(--ajxl-ring, 4px) solid rgba(128, 128, 128, .22);
	border-top-color: var(--ajxl-color, #2271b1);
	border-radius: 50%;
	animation: ajxl-spin var(--ajxl-speed, 900ms) linear infinite;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ajxl-loader__spinner {
		border-color: color-mix(in srgb, var(--ajxl-color, #2271b1) 18%, transparent);
		border-top-color: var(--ajxl-color, #2271b1);
	}
}

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

/* ---------------------------------------------------------------- Loader: overlay */

.ajxl-loader--overlay::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--ajxl-bg, #fff);
	opacity: var(--ajxl-overlay-opacity, .7);
}

.ajxl-loader--overlay .ajxl-loader__box {
	position: relative;
	flex-direction: column;
}

/* The caption sits on its own opaque plate: the translucent veil alone gives no reliable contrast. */
.ajxl-loader__caption {
	display: block;
	max-width: 80vw;
	margin-top: 14px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--ajxl-bg, #fff);
	color: var(--ajxl-color, #2271b1);
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Loader: text pill */

.ajxl-loader__pill {
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--ajxl-bg, #fff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08);
	color: var(--ajxl-color, #2271b1);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .01em;
	text-transform: none;
	white-space: nowrap;
}

.ajxl-loader__label {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ajxl-loader__dots {
	position: relative;
	top: .25em;
	display: flex;
	flex: none;
	margin-inline-start: 5px;
}

.ajxl-loader__dot {
	display: block;
	width: 4px;
	height: 4px;
	margin: 0 1.5px;
	border-radius: 50%;
	background: currentColor;
	opacity: .3;
	animation: ajxl-dot calc(var(--ajxl-speed, 900ms) * 1.4) ease-in-out infinite;
}

.ajxl-loader__dot:nth-child(2) {
	animation-delay: calc(var(--ajxl-speed, 900ms) * .18);
}

.ajxl-loader__dot:nth-child(3) {
	animation-delay: calc(var(--ajxl-speed, 900ms) * .36);
}

@keyframes ajxl-dot {
	0%,
	70%,
	100% {
		opacity: .3;
		transform: none;
	}

	35% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

/* ---------------------------------------------------------------- Loader: logo */

.ajxl-loader__logo {
	display: block;
	flex: none;
	width: auto;
	min-width: var(--ajxl-size, 40px);
	max-width: 60vw;
	height: var(--ajxl-size, 40px);
	max-height: none;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	animation: ajxl-pulse calc(var(--ajxl-speed, 900ms) * 1.6) ease-in-out infinite;
}

@keyframes ajxl-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .6;
		transform: scale(.94);
	}
}

/* ---------------------------------------------------------------- Loader: skeleton */

/* Placed over the content container's box by loader.js (top/left/width/height inline, plus a
   clip-path for the part that scrolls under fixed/sticky chrome such as the admin bar). */
.ajxl-loader--skeleton {
	position: absolute;
	background: var(--ajxl-bg, #fff);
}

/* Sticky, so the placeholder stays in view on a scrolled page (no overflow on the parent). */
.ajxl-loader__lines {
	position: -webkit-sticky;
	position: sticky;
	top: var(--ajxl-sticky-top, 0px);
	display: block;
	max-height: 100%;
	overflow: hidden;
	padding: 24px 20px;
}

.ajxl-loader__title,
.ajxl-loader__line {
	position: relative;
	display: block;
	height: 12px;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(128, 128, 128, .16);
}

.ajxl-loader__title {
	width: 55%;
	height: 22px;
	margin-bottom: 22px;
	border-radius: 8px;
}

.ajxl-loader__line:nth-child(5n + 3) {
	width: 94%;
}

.ajxl-loader__line:nth-child(5n + 4) {
	width: 97%;
}

.ajxl-loader__line:nth-child(5n + 1) {
	width: 64%;
	margin-bottom: 26px;
}

.ajxl-loader__title::after,
.ajxl-loader__line::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
	transform: translateX(-100%);
	animation: ajxl-shimmer calc(var(--ajxl-speed, 900ms) * 1.8) ease-in-out infinite;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ajxl-loader__title::after,
	.ajxl-loader__line::after {
		background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ajxl-bg, #fff) 65%, transparent), transparent);
	}
}

@keyframes ajxl-shimmer {
	to {
		transform: translateX(100%);
	}
}

/* ---------------------------------------------------------------- Reduced motion */

/* .ajxl-rm (on html and on the loader) = the site honours prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {

	.ajxl-rm .ajxl-tr {
		transform: none;
		transition: none;
	}

	.ajxl-rm .ajxl-loader__bar,
	.ajxl-rm .ajxl-loader__box {
		transition: none;
	}

	.ajxl-rm .ajxl-loader__box {
		transform: none;
	}

	.ajxl-rm .ajxl-loader__spinner,
	.ajxl-rm .ajxl-loader__dot,
	.ajxl-rm .ajxl-loader__logo {
		animation: none;
	}

	.ajxl-rm .ajxl-loader__dot {
		opacity: .7;
	}

	.ajxl-rm .ajxl-loader__title::after,
	.ajxl-rm .ajxl-loader__line::after {
		content: none;
	}
}

/* ---------------------------------------------------------------- Print */

@media print {

	.ajxl-loader {
		display: none !important;
	}
}

/* ---------------------------------------------------------------- Forced colors (high contrast) */

@media (forced-colors: active) {

	.ajxl-loader {
		forced-color-adjust: none;
	}

	.ajxl-loader__bar {
		background: Highlight;
	}

	.ajxl-loader__bar::after {
		box-shadow: none;
	}

	.ajxl-loader__spinner {
		border-color: GrayText;
		border-top-color: Highlight;
	}

	.ajxl-loader--spinner .ajxl-loader__box,
	.ajxl-loader--logo .ajxl-loader__box,
	.ajxl-loader__pill {
		border: 1px solid CanvasText;
		background: Canvas;
		box-shadow: none;
		color: CanvasText;
	}

	.ajxl-loader--overlay::before {
		background: Canvas;
	}

	.ajxl-loader__caption {
		background: Canvas;
		color: CanvasText;
	}

	.ajxl-loader__dot {
		background: CanvasText;
	}

	.ajxl-loader--skeleton {
		outline: 1px solid CanvasText;
		background: Canvas;
	}

	.ajxl-loader__title,
	.ajxl-loader__line {
		background: GrayText;
	}
}