<script>"use strict";
export let size = "sm";
export let color = "base";
let sizeClasses;
let colorClass;
switch (size) {
  case "xs":
    sizeClasses = "w-3 h-3";
    break;
  case "sm":
    sizeClasses = "w-4 h-4";
    break;
  case "md":
    sizeClasses = "w-5 h-5";
    break;
  case "lg":
    sizeClasses = "w-9 h-9";
    break;
  case "xl":
    sizeClasses = "w-12 h-12";
    break;
  default:
    sizeClasses = "w-3 h-3";
}
switch (color) {
  case "base":
    colorClass = "text-base-500";
    break;
  case "white":
    colorClass = "text-white";
    break;
  case "black":
    colorClass = "text-stone-950";
    break;
  case "amber":
    colorClass = "text-amber-600";
    break;
  case "blue":
    colorClass = "text-blue-600";
    break;
  case "emerald":
    colorClass = "text-emerald-600";
    break;
  case "purple":
    colorClass = "text-purple-600";
    break;
  case "rose":
    colorClass = "text-rose-600";
    break;
  case "sky":
    colorClass = "text-sky-600";
    break;
  case "terracota":
    colorClass = "text-terracota-500";
    break;
  case "yellow":
    colorClass = "text-yellow-600";
    break;
  default:
    colorClass = "text-gray-500";
}
</script>

<svg
	class="{sizeClasses} {colorClass} animate-spin"
	width="48"
	height="48"
	viewBox="0 0 48 48"
	fill="none"
	xmlns="http://www.w3.org/2000/svg"
>
	<path
		d="M48 24C48 27.6044 45.0781 30.5263 41.4737 30.5263C37.8693 30.5263 34.9474 27.6044 34.9474 24C34.9474 20.3956 37.8693 17.4737 41.4737 17.4737C45.0781 17.4737 48 20.3956 48 24Z"
		fill="currentColor"
		class="spinner-circle-1"
	/>
	<path
		d="M13.0526 24C13.0526 27.6044 10.1307 30.5263 6.52632 30.5263C2.92193 30.5263 0 27.6044 0 24C0 20.3956 2.92193 17.4737 6.52632 17.4737C10.1307 17.4737 13.0526 20.3956 13.0526 24Z"
		fill="currentColor"
		class="spinner-circle-2"
	/>
	<path
		d="M24 0C27.6044 -1.57553e-07 30.5263 2.92193 30.5263 6.52632C30.5263 10.1307 27.6044 13.0526 24 13.0526C20.3956 13.0526 17.4737 10.1307 17.4737 6.52632C17.4737 2.92193 20.3956 1.57553e-07 24 0Z"
		fill="currentColor"
		class="spinner-circle-3"
	/>
	<path
		d="M24 34.9474C27.6044 34.9474 30.5263 37.8693 30.5263 41.4737C30.5263 45.0781 27.6044 48 24 48C20.3956 48 17.4737 45.0781 17.4737 41.4737C17.4737 37.8693 20.3956 34.9474 24 34.9474Z"
		fill="currentColor"
		class="spinner-circle-4"
	/>
</svg>

<style>
	.animate-spin {
		animation: rotate 1s ease-in-out infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(180deg);
		}
		100% {
			transform: rotate(180deg);
		}
	}
</style>
