TOGGLE
SWITCH

.switch {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 48px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #E5E5E5;
  border: 1px solid #1A1A1A;
  transition: background 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.switch .slider::before {
  content: '';
  position: absolute;
  height: 36px; width: 36px;
  left: 4px; bottom: 4px;
  background: #1A1A1A;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.switch input:checked + .slider {
  background: #E91B89;
  border-color: #E91B89;
}

.switch input:checked + .slider::before {
  transform: translateX(48px);
  background: #FAFAFA;
}

.switch input:focus-visible + .slider {
  outline: 2px solid #E91B89;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .switch .slider,
  .switch .slider::before { transition: none; }
}