
<script lang="ts">

let { children, name, value = '1' } = $props();

let checked = $state(false);
</script>

<label>
    <span class="toggleout" class:checked role="checkbox" aria-checked={checked}></span>
    <input type="checkbox" bind:checked {name} {value} />
    {@render children()}
</label>

<style>
    [type="checkbox"] {
        display: none;
    }

    .toggleout {
        display: inline-block;
        height: 1em;
        width: 2em;
        vertical-align: middle;
        background-color: var(--bg-sharp);
        border-radius: 1em;
        position: relative;
        transition: ease .5s;
    }

    .toggleout::before {
        display: inline-block;
        background-color: var(--text-primary);
        width: .8em;
        height: .8em;
        border-radius: 1em;
        content: '\00d7';
        color: var(--bg-sharp);
        position: absolute;
        left: .1em;
        top: .1em;
        line-height: .6;
        transition: ease .5s left;
    }

    .toggleout.checked {
        background-color: var(--accent);
    }

    .toggleout.checked::before {
        content: '\2713';
        left: 1.1em;
        top: .1em;
    }
</style>
