/*  
<div class="checkbox-wrapper">
      <!-- <input type="checkbox" name="apply-background" checked=checked> -->
      <input type="checkbox" class="switch" name="apply-background" checked="checked">
  </div>
*/
.checkbox-wrapper .switch {
  appearance: none;
  background-color: #080808;
  border-radius: 3em;
  border-style: none;
  flex-shrink: 0;
  height: 1em;
  margin: 0;
  position: relative;
  width: 2em;
}

.checkbox-wrapper .switch::before {
  bottom: -6px;
  content: "";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
}

.checkbox-wrapper .switch,
.checkbox-wrapper .switch::after {
  transition: all 100ms ease-out;
}

.checkbox-wrapper .switch::after {
  background-color: #323232;
  border-radius: 50%;
  content: "";
  height: 0.8em;
  left: 0.1em;
  position: absolute;
  top: 0.1em;
  width: 0.8em;
}

.checkbox-wrapper input[type=checkbox] {
  cursor: default;
}

.checkbox-wrapper .switch:hover {
  background-color: #686868;
  transition-duration: 0s;
}

.checkbox-wrapper .switch:checked {
  background-color: #a72dba;
}

.checkbox-wrapper .switch:checked::after {
  background-color: #080808;
  left: 1.1em;
}

.checkbox-wrapper :focus:not(.focus-visible) {
  outline: 0;
}

.checkbox-wrapper .switch:checked:hover {
  background-color: #702072;
}

.checkbox-wrapper {
  display: flex;
}