---
import BrushIcon from "../../assets/svg/paintbrush.svg";
---

<input type="checkbox" x-model="darkMode" />

<style>
  input {
    appearance: none;
    height: 24px;
    width: 24px;
    background-image: url(../../assets/svg/moon.svg);
    background-size: 24px;
    padding: 10px;
    border-radius: 100%;
    transition: var(--transition);
    transform: rotate(0deg) translateY(-2px);
  }

  input:hover {
    opacity: 0.7;
  }

  input:checked {
    background-image: url(../../assets/svg/sun.svg);
    transform: rotate(180deg) translateY(2px);
  }
</style>