<script type="module" src="https://unpkg.com/@auroratide/toggle-switch@0.1.1/lib/define.js"></script>

<section>
  <div class="switch-container">
    <toggle-switch id="switch" aria-label="Toggle light bulb"></toggle-switch>
  </div>
  <div class="lightbulb-container">
    <svg class="lightbulb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.017 396.533"><title>Light Bulb</title><path id="light" class="off" d="M178.877 381.85c26.554.143 42.663-5.374 63.27-8.942 18.403-57.588 64.61-113.889 78.377-181.652C301.362 81.492 209.399 65.768 209.399 65.768S97.067 93.635 93.739 188.988c13.88 75.697 91.374 143.035 85.138 192.862z" transform="translate(-78.412 -53.56)"/><path d="M178.407 381.594s-.355 17.24-.137 25.858c.426 16.825 8.765 27.814 15.75 35.414 9.527 1.892 19.186 2.254 27.799-5.012 17.993-13.28 22.733-64.612 22.733-64.612z" style="fill:#888;fill-opacity:1;stroke:none;stroke-width:.26784px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" transform="translate(-78.412 -53.56)"/><g><path style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M177.971 386.636C184.063 315.168 83 273.143 78.665 194.15 74.33 115.157 126.239 56.752 202.973 53.673c76.734-3.08 130.294 57.473 125.11 137.96-5.183 80.49-67.464 95.533-91.609 226.8 3.884-148.463 71.736-161.217 68.93-233.225C302.6 113.2 262.079 76.221 203.73 79.753c-58.349 3.532-102.81 47.94-100.08 115.126 2.731 67.186 100.105 117.85 74.322 191.757z" transform="translate(-78.412 -53.56)"/><path d="M157.43 223.193s17.553 1.632 20.845-10.334c3.292-11.965-4.196-22.912-14.533-20.397-10.336 2.516-9.545 19.484.654 19.758-5.48-5.356-3.046-11.06.526-11.964 3.572-.904 8.54 2.02 7.627 9.738-.913 7.718-15.119 13.2-15.119 13.2zM185.94 225.35s17.552 1.631 20.844-10.334c3.292-11.966-4.196-22.913-14.533-20.397-10.336 2.515-9.545 19.484.654 19.757-5.48-5.355-3.047-11.059.526-11.963 3.572-.905 8.54 2.019 7.627 9.737-.913 7.719-15.119 13.2-15.119 13.2zM213.2 223.746s17.554 1.632 20.846-10.334c3.291-11.965-4.197-22.912-14.533-20.397-10.337 2.516-9.545 19.484.654 19.758-5.48-5.356-3.047-11.06.525-11.964 3.572-.904 8.54 2.02 7.627 9.738-.912 7.718-15.118 13.199-15.118 13.199zM239.185 220.75s17.553 1.632 20.845-10.333c3.292-11.966-4.196-22.913-14.533-20.397-10.336 2.515-9.545 19.484.654 19.758-5.48-5.356-3.047-11.06.526-11.964 3.572-.905 8.539 2.019 7.627 9.737-.913 7.719-15.119 13.2-15.119 13.2z" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.245149px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" transform="translate(-78.412 -53.56)"/><path d="M150.31 209.23c9.183 49.813 49.43 68.766 50.188 110.79-15.855-31.105-59.665-65.438-50.187-110.79z" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.286321px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" transform="translate(-78.412 -53.56)"/><path style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.269564px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M269.245 205.408c-7.897 51.343-42.509 70.878-43.16 114.193 13.635-32.06 51.31-67.448 43.16-114.193z" transform="translate(-78.412 -53.56)"/><path d="M241.171 373.188c-32.473-14.114-37.459 3.06-62.936 8.654 24.6 10.461 33.8 1.58 62.936-8.654z" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" transform="translate(-78.412 -53.56)"/><path style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.27586px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M240.213 395.246c-35.933-12.414-40.528 5-67.924 11.909 27.209 9.173 36.776-.175 67.924-11.909z" transform="translate(-78.412 -53.56)"/><path style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.252804px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="M236.558 418.516c-29.472-14.474-34.233 2.644-57.558 7.955 22.329 10.733 30.836 1.955 57.558-7.955z" transform="translate(-78.412 -53.56)"/><path d="M192.402 438.265c11.821 3.2 21.258.304 31.564-6.875 3.884 7.027-.527 16.736-13.426 18.437-12.9 1.701-18.882-5.06-18.138-11.562z" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:.285352px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" transform="translate(-78.412 -53.56)"/></g></svg>
  </div>
</section>
<footer>
  <p>Available on <strong><a target="_blank" href="https://github.com/Auroratide/toggle-switch">Github</a></strong> for install and use!</p>
  <p>Or read a <a target="_blank" href="http://auroratide.com/posts/making-a-toggle-switch">tutorial for building this</a>!</p>
</footer>

:root {
  --dark: hsl(0, 0%, 87%);
  --light: hsl(60, 100%, 50%);
  --light-muted: hsl(48, 100%, 42%);
}

body {
  font-family: sans-serif;
}

/* Switch Styling
 * ===================================== */
toggle-switch {
  height: 1.125em;
}

toggle-switch::part(track) {
  padding: 0.125em;
  border-radius: 1em;
  background-color: hsl(0, 0%, 67%);
}

toggle-switch::part(slider) {
  border-radius: 1em;
  background-color: hsl(0, 0%, 100%);
  box-shadow: 0.0625em 0.0625em 0.125em hsla(0, 0%, 0%, 0.25);
}

toggle-switch[checked]::part(track) {
  background-color: var(--light-muted);
}

/* Light
 * ===================================== */
#light {
  fill: var(--dark);
}

#light.on {
  fill: var(--light);
  filter: drop-shadow(0 0 5em var(--light));
}

/* Page
 * ===================================== */
section {
  display: flex;
  max-width: 30rem;
  margin: auto;
  align-items: center;
  justify-content: center;
}

section > div {
  flex: 1;
}

.switch-container {
  font-size: 3rem;
  text-align: center;
}

.lightbulb-container {
  text-align: center;
}

.lightbulb {
  overflow: visible;
  max-width: 20em;
  max-height: calc(90vh - 4rem);
}

footer {
  text-align: center;
}

const toggleSwitch = document.getElementById('switch')
const light = document.getElementById('light')

toggleSwitch.addEventListener('toggle-switch:change', ({ detail }) => {
  light.classList.toggle('off', !detail.checked)
  light.classList.toggle('on', detail.checked)
})