<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('../assets/svgs/checkbox-checkmark.svg') !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}
	input[type='checkbox']:indeterminate {
		background-image: url('../assets/svgs/checkbox-intermediate.svg') !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
	}
</style>
