<script setup lang="ts">

const modelValue = defineModel({ default: false });
</script>

<template>
    <label class="flex items-center relative w-max cursor-pointer select-none">
        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="modelValue" />
        <span class="w-5 h-5 right-5 absolute rounded-full transform transition-transform bg-slate-100 peer-checked:bg-emerald-200" />
    </label>
</template>

<style scoped>
@reference "@/style.css";
    input:checked ~ span:last-child {
        --tw-translate-x: 1.25rem;
    }
</style>