<svelte:options
	customElement={{
		tag: 'eve-loading',
		shadow: 'none'
	}}
/>

<script lang="ts">
	import { onMount } from 'svelte';

	const {
		size = 'sm'
	}: {
		size?: 'sm' | 'md' | 'lg' | 'xl';
	} = $props();

	const actualSize =
		size === 'sm'
			? 'calc(var(--size-selector, .25rem) * 2)'
			: size === 'md'
				? 'calc(var(--size-selector, .25rem) * 4)'
				: size === 'lg'
					? 'calc(var(--size-selector, .25rem) * 8)'
					: 'calc(var(--size-selector, .25rem) * 16)';
</script>

<span class="loading loading-spinner" style:width={actualSize} style:height={actualSize}></span>
