<script>
import { createEventDispatcher } from 'svelte';
export let checked = false;
const dispatch = createEventDispatcher();
function handleClick() {
dispatch('toggleSwitchClicked', checked);
}
</script>
<input type="checkbox" id="toggle" name="toggle" aria-label="Toggle switch" aria-hidden="true" checked={checked} class="sr-only" on:click={handleClick} />
<div class="toggle" aria-pressed={checked}>
<label for="toggle">
<div class="circle"> </div>
</label>
</div>
<style>
*::focus {outline: 2px solid salmon;}
.toggle {
background-color: lightgray;
border-radius: 9999px;
width: 60px;
height: 30px;
padding: 2px;
transition: background-color .3s ease-in-out;
}
.circle {
background-color: #fff;
border-radius: 50%;
cursor: pointer;
width: 30px;
height: 30px;
transition: transform .2s ease-in-out;