modeling-app/src/components/Toggle/Toggle.module.css

.toggle {
  @apply flex items-center gap-2 w-fit;
  --toggle-size: 1.25rem;
  --padding: 0.25rem;
}

.toggle:focus-within > span {
  @apply outline-none ring-2;
}

.toggle input {
  @apply sr-only;
}

.toggle > span {
  @apply relative rounded border border-chalkboard-110 hover:border-chalkboard-100 cursor-pointer;
  width: calc(2 * (var(--toggle-size) + var(--padding)));
  height: calc(var(--toggle-size) + var(--padding));
}

:global(.dark) .toggle > span {
  @apply border-chalkboard-40 hover:border-chalkboard-30;
}

.toggle > span::after {
  content: '';
  @apply absolute w-4 h-4 rounded-sm bg-chalkboard-110;
  top: 50%;
  left: 50%;
  translate: calc(-100% - var(--padding)) -50%;
  transition: translate 0.08s ease-out;
}

:global(.dark) .toggle > span::after {
  @apply bg-chalkboard-10;
}

.toggle input:checked + span::after {
  translate: calc(50% - var(--padding)) -50%;
}