<style>
</style>
<script>
  import Icon from "$/client/components/Icon.svelte";
</script>

<p>Basic demo that's just on/off.</p>
<input class="switch" type="checkbox" id="demo-1">
<label class="switch" for="demo-1"></label>

<p>Demo with Yes/No text.</p>
<input class="switch" type="checkbox" id="demo-2">
<label class="switch" for="demo-2">
  <active>Yes</active>
  <inactive>No</inactive>
</label>

<p>Demo showing you can change the size.</p>
<input class="switch" type="checkbox" id="demo-3">
<label class="switch medium" for="demo-3">
  <active>Yes</active>
  <inactive>No</inactive>
</label>

<input class="switch" type="checkbox" id="demo-4">
<label class="switch large" for="demo-4">
  <active>Yes</active>
  <inactive>No</inactive>
</label>

<p>Demo with Icons in rather than text.</p>
<input class="switch" type="checkbox" id="demo-5">
<label class="switch" for="demo-5">
  <active><Icon name="eye" size="18px" /></active>
  <inactive><Icon name="eye-off" size="18px" /></inactive>
</label>

<input class="switch" type="checkbox" id="demo-6">
<label class="switch medium" for="demo-6">
  <active><Icon name="eye" size="24px" /></active>
  <inactive><Icon name="eye-off" size="24px" /></inactive>
</label>

<input class="switch" type="checkbox" id="demo-7">
<label class="switch large" for="demo-7">
  <active><Icon name="eye" size="36px" /></active>
  <inactive><Icon name="eye-off" size="36px" /></inactive>
</label>
