<!-- inspired by https://dribbble.com/shots/2272690-Switch -->
<input type="checkbox" role="switch" class="colorful" />
<input type="checkbox" role="switch" class="colorful" checked />
<input type="checkbox" role="switch" class="colorful" disabled />
<input type="checkbox" role="switch" class="colorful" disabled checked />

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  background: #123;
  font-size: 2rem;
  gap: 1em;
}

.colorful {
  appearance: none;
  position: relative;
  width: 3em;
  aspect-ratio: 2.25;
  background: red;
  border-radius: 100vmax;
  font-size: 1em;
  background: linear-gradient(90deg, #12dbd6, #0ae1c4, #ed992e, #e76439) 0 0 / 7.5em 100%;
  background: linear-gradient(90deg, #e76439, #ed992e, #10b1a4, #00A0B0) 0 0 / 7.5em 100%;
  transition: background-position 0.5s linear;
  border: 1px solid #0000;
  background-clip: content-box;
  
  &::before, &::after {
    content: "";
    position: absolute;
    width: 0.1em;
    height: 0.8em;
    background: #fff;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 1em;
    transition: all 0.4s 0.25s;
    border: 1px solid #0000;
    box-sizing: border-box;
  }
  
  &::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  
  &:checked {
    background-position: -4.5em 0;
    
    &::before {
      left: 75%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    
    &::after {
      height: 0.4em;
      top: 60%;
      left: 63%;
      transform: translate(-50%, -50%) rotate(-225deg);
    }
  }
  
  &[disabled] {
    opacity: 0.25;
  }
}

@media print {
  .colorful {
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .colorful {
    &, &::before, &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}