:root {
	--hub-loader-color: #2344c6;
	--hub-loader-surface: rgba(248, 250, 255, 0.58);
}

.hub-site-loader {
	align-items: center;
	background: var(--hub-loader-surface);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 140ms ease;
	visibility: hidden;
	z-index: 100000;
}

html.hub-site-loader-active .hub-site-loader {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.hub-site-loader__status,
.hub-site-loader__spinner {
	display: block;
	height: 44px;
	position: relative;
	width: 44px;
}

.hub-site-loader__circle {
	animation: hub-loader-bounce 2s infinite ease-in-out;
	background: var(--hub-loader-color);
	border-radius: 50%;
	height: 100%;
	left: 0;
	opacity: 0.66;
	position: absolute;
	top: 0;
	width: 100%;
}

.hub-site-loader__circle--two {
	animation-delay: -1s;
}

body.hub-site-loader-enabled {
	--hub-loader-color: #2344c6;
}

/* WorkScout keeps ownership of in-place listing updates. Its existing loader
 * uses the same Hub motion and colour, while the full-screen loader stays
 * reserved for page readiness, navigation and non-listing operations. */
body.hub-site-loader-enabled .listings-loader {
	width: 44px;
	height: 44px;
}

body.hub-site-loader-enabled .listings-loader .spinner {
	position: relative;
	width: 44px;
	height: 44px;
	margin: 0;
}

body.hub-site-loader-enabled .listings-loader .double-bounce1,
body.hub-site-loader-enabled .listings-loader .double-bounce2 {
	animation: hub-loader-bounce 2s infinite ease-in-out;
	background: var(--hub-loader-color);
	opacity: .66;
}

body.hub-site-loader-enabled .listings-loader .double-bounce2 {
	animation-delay: -1s;
}

html.hub-site-loader-active .listings-loader {
	visibility: hidden !important;
}

html.hub-site-loader-active body {
	cursor: progress;
}

@keyframes hub-loader-bounce {
	0%,
	100% {
		transform: scale(0);
	}
	50% {
		transform: scale(1);
	}
}

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

	.hub-site-loader__circle {
		animation: none;
		opacity: 0.34;
		transform: scale(0.72);
	}

	body.hub-site-loader-enabled .listings-loader .double-bounce1,
	body.hub-site-loader-enabled .listings-loader .double-bounce2 {
		animation: none;
		opacity: .34;
		transform: scale(.72);
	}

	.hub-site-loader__circle--two,
	body.hub-site-loader-enabled .listings-loader .double-bounce2 {
		opacity: 0.8;
		transform: scale(0.34);
	}
}