<script lang="ts">
	import type { ClassValue } from 'svelte/elements';

	interface Props {
		size?: string;
		class?: ClassValue;
	}

	let { size = '2em', class: classValue }: Props = $props();
	const radius = 18;
</script>

<svg
	class={['sui-spinner stroke-white', classValue]}
	width={size}
	height={size}
	viewBox="0 0 40 40"
>
	<circle cx="20" cy="20" r={radius} fill="none" stroke-width="4" stroke-linecap="round">
		<animate
			attributeName="stroke-dasharray"
			values="22,90; 38,74; 22,90"
			keyTimes="0;0.75;1"
			dur="2s"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="stroke-dashoffset"
			values="0;-56.5;-113"
			keyTimes="0;0.75;1"
			dur="2s"
			repeatCount="indefinite"
		/>
	</circle>
</svg>

<style>
	.sui-spinner {
		display: inline-block;
		vertical-align: middle;
		animation: spinner-rotate 2s cubic-bezier(0.55, 0.15, 0.35, 1) infinite;
	}
	@keyframes spinner-rotate {
		0% {
			transform: rotate(0deg);
		}
		/* 15% {
			transform: rotate(60deg);
		} */
		50% {
			transform: rotate(180deg);
		}
		/* 80% {
			transform: rotate(300deg);
		} */
		100% {
			transform: rotate(360deg);
		}
	}
</style>
