<script>
  import { boundElements } from 'svelte-preprocess-delegate-events/runtime';
  import { registerDelegatedEvents } from 'svelte-preprocess-delegate-events/runtime';
  import { get_current_component } from 'svelte/internal';"use strict";
export let size = "md";
export let label = "";
export let caption = "";
export let checked = false;
export let indeterminate = false;
export let disabled = false;
export let readonly = false;

  const input0 = boundElements();
  const component0 = get_current_component();
  $: registerDelegatedEvents(input0.bounds, component0, (handler) => handler, {});
</script>

<div class="flex flex-col space-y-1 w-fit" class:opacity-30={disabled}>
	<label class="inline-flex items-center" class:cursor-pointer={!disabled && !readonly}>
		<input
			bind:this={input0.bounds}
			type="checkbox"
			bind:checked
			disabled={readonly || disabled}
			class="rounded-sm outline-2 border-stone-300 focus:ring-offset-0 focus:ring focus:ring-sky-500"
			class:h-4={size === 'sm'}
			class:w-4={size === 'sm'}
			class:h-5={size === 'md'}
			class:w-5={size === 'md'}
			class:w-6={size === 'lg'}
			class:h-6={size === 'lg'}
			class:text-blue-600={!disabled && !readonly}
			class:hover:text-blue-700={!disabled && !readonly}
			class:text-stone-500={readonly}
			class:bg-stone-200={readonly}
			class:cursor-pointer={!disabled && !readonly}
			class:!bg-[length:10px_8px]={!indeterminate && size === 'sm'}
			class:!bg-[length:12px_9px]={!indeterminate && size === 'md'}
			class:!bg-[length:14px_11px]={!indeterminate && size === 'lg'}
			class:!bg-[length:10px_4px]={indeterminate && size === 'sm'}
			class:!bg-[length:12px_4px]={indeterminate && size === 'md'}
			class:!bg-[length:14px_4px]={indeterminate && size === 'lg'}
			{indeterminate}
			{...$$restProps}
		/>
		{#if label}
			<span class="ml-2 text-2xl text-stone-600">{label}</span>
		{/if}
	</label>
	{#if caption}
		<p class="text-xl text-stone-400 ml-7">{caption}</p>
	{/if}
</div>

<style>
	input[type='checkbox']:checked {
		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%229%22%20viewBox%3D%220%200%2012%209%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M1.31236%203.94048L4.49717%207.125L10.6876%200.875%22%20stroke%3D%22%23FDFDFC%22%20stroke-width%3D%222.5%22%20/%3E%20%3C/svg%3E') !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}
	input[type='checkbox']:indeterminate {
		background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%224%22%20viewBox%3D%220%200%2012%204%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1%204H11C11.5523%204%2012%203.55228%2012%203V1C12%200.447715%2011.5523%200%2011%200H1C0.447715%200%200%200.447715%200%201V3C0%203.55228%200.447715%204%201%204Z%22%20fill%3D%22%23FBF9F6%22/%3E%3C/svg%3E') !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}
</style>
