/*
 * LoadingIndicator styles — holdon-style overlay + SpinKit "sk-rect" spinner.
 *
 * LoadingIndicatorComponent (./index.tsx) emits the `.holdon-overlay` /
 * `.holdon-content` / `.sk-rect` / `.rect1..5` / `.sr-only` classes but the
 * stylesheet for them was never shipped with the component, so the spinner
 * bars rendered as unstyled (invisible) divs and the "Loading..." sr-only
 * label leaked as plain text (Bootstrap 5 dropped `.sr-only`). Added as part
 * of QA_AT-220 (DataTable loading preloader) so the reused LoadingIndicator
 * actually shows a centered, animated spinner everywhere it is mounted.
 *
 * COLLISION CONTRACT (gap-regression follow-up): host apps commonly ship the
 * original HoldOn.js CSS globally (e.g. an inline <style> in index.html that
 * styles their boot overlay and injected blockers) and it targets these SAME
 * class names. This sheet must therefore behave as a DEFAULT, never an
 * override:
 *  - the overlay rule sits in `:where()` (zero specificity) so app-level
 *    `.holdon-overlay` styling — backgrounds in particular — keeps winning;
 *  - bar spacing uses `margin-left: 2px`, the exact HoldOn.js value, instead
 *    of flex `gap`: gap STACKS with the host's margin (2px + 3px = 5px bar
 *    gaps), while a value-identical margin is a no-op regardless of cascade
 *    order;
 *  - no `.holdon-content` rule: flex-centering it shifted the spinner inside
 *    HoldOn.js' absolutely-positioned 50x57 content box; the overlay's own
 *    flex centering already covers hosts without app-level holdon CSS.
 */

:where(.holdon-element.holdon-overlay) {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.65);
}

/* SpinKit "rect" — five bars that stretch in sequence. */
.sk-rect {
	width: 50px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 10px;
}

.sk-rect > div {
	background-color: #b3b3b3;
	width: 6px;
	height: 100%;
	margin-left: 2px;
	display: inline-block;
	animation: holdon-sk-stretchdelay 1.2s infinite ease-in-out;
}

.sk-rect .rect2 {
	animation-delay: -1.1s;
}

.sk-rect .rect3 {
	animation-delay: -1s;
}

.sk-rect .rect4 {
	animation-delay: -0.9s;
}

.sk-rect .rect5 {
	animation-delay: -0.8s;
}

@keyframes holdon-sk-stretchdelay {
	0%,
	40%,
	100% {
		transform: scaleY(0.4);
	}

	20% {
		transform: scaleY(1);
	}
}

/* Screen-reader-only: hide the "Loading..." label visually (Bootstrap 5 has no .sr-only). */
.holdon-element .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}