/*
 * Search Loading Indicator
 * Small ring spinner inside a search input while results load. Tan rule:
 * Accent on dark backgrounds, Secondary 4 on light ones (contrast). The script
 * adds --on-light when the input has dark text. Set --sli-color to override.
 */

.sli-spinner {
	--sli-size: 16px;
	position: absolute;
	top: 50%;
	right: 0;
	width: var(--sli-size);
	height: var(--sli-size);
	box-sizing: border-box;
	border: 2px solid var(--sli-color, var(--wp--preset--color--accent, #e99251));
	border-top-color: transparent;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
	animation: sli-spin 0.8s linear infinite;
}

.sli-spinner--on-light {
	--sli-color: var(--wp--preset--color--secondary-4, #9e5f2c);
}

.sli-spinner.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.15s ease;
}

/* S&F text fields: the spinner takes the search icon's place while loading. */
.search-filter-input-text:has(> .sli-spinner.is-active) .search-filter-input-text__icon:not(.search-filter-input-text__clear-button) {
	visibility: hidden;
}

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

@media (prefers-reduced-motion: reduce) {
	.sli-spinner {
		border-top-color: var(--sli-color, var(--wp--preset--color--accent, #e99251));
		animation: sli-pulse 1.6s ease-in-out infinite;
	}

	@keyframes sli-pulse {
		50% {
			opacity: 0.35;
		}
	}
}