/*
 * RahkarTheme — universal loading state.
 *
 * Any interactive control with [aria-busy="true"] picks up:
 *   - Pointer events disabled, so the same control can't be triggered twice
 *     mid-flight.
 *   - Label + child icons hidden, replaced by a centered CSS-only spinner
 *     drawn via ::after.
 *
 * Why aria-busy as the hook: it is the same attribute screen readers
 * already announce. JS sets ONE attribute and both sighted and AT users
 * get correct feedback — no separate class to keep in sync.
 *
 * Why button-like roles only get the spinner overlay: container-level
 * [aria-busy="true"] on a row / panel / form means "something inside is
 * working" — overlaying a giant spinner there would compete with the
 * per-button spinner that's actually the focus of attention. Containers
 * get a subtle dim instead.
 *
 * Default spinner color: white on a translucent ring. Tuned for the
 * dominant button surface in this theme — primary brand-blue background
 * with white text. Outlined / light buttons opt in to a dark spinner via
 * [data-busy-on="light"].
 */

button[aria-busy="true"],
a[aria-busy="true"],
[role="button"][aria-busy="true"],
input[type="submit"][aria-busy="true"] {
	position: relative;
	color: transparent !important;
	pointer-events: none;
	user-select: none;
}

/* Inline icons that paint with explicit colors (not currentColor) would
   otherwise stay visible behind the spinner — hide them too. */
button[aria-busy="true"] > svg,
button[aria-busy="true"] > img,
a[aria-busy="true"] > svg,
a[aria-busy="true"] > img,
[role="button"][aria-busy="true"] > svg,
[role="button"][aria-busy="true"] > img {
	visibility: hidden;
}

button[aria-busy="true"]::after,
a[aria-busy="true"]::after,
[role="button"][aria-busy="true"]::after,
input[type="submit"][aria-busy="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: rh-spin 0.65s linear infinite;
}

/* Opt-in: dark spinner for outlined / text-link / light-bg buttons. */
button[aria-busy="true"][data-busy-on="light"]::after,
a[aria-busy="true"][data-busy-on="light"]::after,
[role="button"][aria-busy="true"][data-busy-on="light"]::after,
input[type="submit"][aria-busy="true"][data-busy-on="light"]::after {
	border-color: rgba(15, 17, 21, 0.18);
	border-top-color: var(--wp--preset--color--contrast, #0f1115);
}

/* Smaller spinner for compact controls (icon-only chips, tight rows). */
button[aria-busy="true"][data-busy-size="sm"]::after,
a[aria-busy="true"][data-busy-size="sm"]::after,
[role="button"][aria-busy="true"][data-busy-size="sm"]::after {
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-width: 1.5px;
}

/* Container-level busy: dim only. A spinner-bearing descendant is the
   element the eye should land on; the container just visibly steps back. */
li[aria-busy="true"],
form[aria-busy="true"],
fieldset[aria-busy="true"],
section[aria-busy="true"] {
	opacity: 0.65;
	transition: opacity 0.15s ease;
}

/* Inline-block spinner — for placing a loading indicator inside an input
   or next to a non-button element (e.g. search-as-you-type). Activates
   when the host element gets [data-rh-spinner="true"]. */
[data-rh-spinner="true"] {
	position: relative;
}
[data-rh-spinner="true"]::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 12px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 1.5px solid rgba(15, 17, 21, 0.18);
	border-top-color: var(--wp--preset--color--primary, #0a66c2);
	border-radius: 50%;
	animation: rh-spin 0.65s linear infinite;
	pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
	button[aria-busy="true"]::after,
	a[aria-busy="true"]::after,
	[role="button"][aria-busy="true"]::after,
	input[type="submit"][aria-busy="true"]::after,
	[data-rh-spinner="true"]::after {
		animation-duration: 1.4s;
	}
}