index.module.css

@reference "../../styles/index.css";

.switch {
  @apply inline-flex
    justify-end
    gap-3;

  .label {
    @apply cursor-pointer
      text-sm
      font-medium
      text-neutral-800
      select-none
      dark:text-neutral-200;
  }

  .input {
    @apply sr-only;
  }

  .root {
    @apply relative
      inline-flex
      h-6
      w-10.5
      cursor-pointer
      items-center
      rounded-full
      bg-black
      motion-safe:transition-colors
      motion-safe:duration-100
      motion-safe:ease-out
      dark:bg-neutral-700;
  }

  .input:focus-visible + .root {
    @apply ring-2
      ring-green-500
      ring-offset-2
      ring-offset-neutral-100
      dark:ring-green-400
      dark:ring-offset-neutral-900;
  }

  .input:checked + .root {
    @apply bg-green-600;
  }

  .thumb {
    @apply pointer-events-none
      block
      size-5
      translate-x-0.5
      rounded-full
      bg-white
      ring-0
      motion-safe:transition-transform
      motion-safe:duration-100
      motion-safe:ease-out;
  }

  .input:checked + .root .thumb {
    @apply translate-x-5;
  }
}