/*
 * CILI: the busy state of the site's buttons (the owner's request of 2026-11-09 and his decision of 2026-11-10, ADR-0023's note of
 * that day, docs/design/README.md, "Busy buttons"; WEB-970 to WEB-979). assets/js/busy.js puts `is-busy` on a button, or on a link
 * made to look like one, while its action works; this sheet draws it, for every button of the site alike:
 * - the control looks exactly as it does at rest: its fill, border, shadow and opacity are its own, not dimmed and not the gray of
 *   a disabled control (busy.js keeps the native `disabled` off while the state lasts, so no `:disabled` rule of the theme, Heilz,
 *   Utillz or WooCommerce applies; it is `aria-disabled` and `aria-busy` to a screen reader, and a second click is stopped before any
 *   script sees it); a link takes no pointer;
 * - the box does not change, whatever display the vendor gives the control (inline, inline-flex, a flex container with gaps): the label
 *   and any icon in it are made invisible, not removed, and the spinner is laid over the button's own box, absolutely and centred
 *   (busy.js writes that place on the element with !important) in the colour the label had (the script keeps it in `--lcr-busy-ink`), which is the colour opposite to the
 *   fill, white on a black button and black on a light one, in either mode;
 * - the spinner is the line icon `spinner` (lcr_icon(), printed once by cili/layout.php), at the text's size between the icon
 *   sizes 16 and 24, turning in a loop; under `prefers-reduced-motion: reduce` it stands still, as the skeletons do, and the
 *   button is still `aria-busy` and said to be "Loading" to a screen reader;
 * - Utillz's own preloader inside a button is not shown beside it: one spinner only.
 * Skeletons (layout-skeleton.css) are not touched. Every value is a token.
 */

@keyframes lcr-busy-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

html body .is-busy {
	cursor: progress;
	-webkit-text-fill-color: transparent !important; /* the label's ink, whatever the button's rule; its borders and shadows keep `currentColor` */
	text-shadow: none !important;
}

html body a.is-busy {
	pointer-events: none;
}

/* The label of a pill that draws it as a mask in a pseudo-element (the phone's Search) goes with the rest of the label. */
html body .is-busy[data-lcr-busy-glyph]::before,
html body .is-busy[data-lcr-busy-glyph]::after {
	opacity: 0 !important;
}

/* Whatever the button holds stays in the flow, so its width and height do not move; only the spinner is seen. */
html body .is-busy > :not(.lcr-busy-indicator) {
	opacity: 0 !important; /* Utillz's `.ulz-button > span` and the like */
}

html body .is-busy .ulz-preloader {
	display: none !important; /* Utillz's own spinner: this one is the spinner */
}

/* Where the spinner sits (over the control's box, centred) is written on the element by busy.js, with !important; here only its ink. */
html body .lcr-busy-indicator {
	color: var(--lcr-busy-ink, currentColor);
}

html body .lcr-busy-indicator .lcr-busy-icon {
	width: clamp(var(--lcr-space-16), 1.25em, var(--lcr-space-24));
	height: clamp(var(--lcr-space-16), 1.25em, var(--lcr-space-24));
	flex: none;
	animation: lcr-busy-spin calc(var(--lcr-motion-duration-long) * 2) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	html body .lcr-busy-indicator .lcr-busy-icon {
		animation: none;
	}
}