/* Inline loading spinner. Shared base so components only have to set a size — used by BotUI,
   RolesOverview, TestimonialSelector, WebinarPicker and BlogAudio.
   For a component that renders client side, prefer a skeleton (Skeleton.css): a spinner has no
   size of its own, so the layout jumps once the real content arrives. */
.rd-spinner {
	display: inline-block;
	width: 24px;
	height: 24px;
	border: 2px solid var(--rd-gray-200);
	border-top-color: var(--rd-primary-active);
	border-radius: 50%;
	animation: rd-spinner-rotate 0.8s linear infinite;
}

@keyframes rd-spinner-rotate {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rd-spinner {
		animation-duration: 2.4s;
	}
}