.c-switch-root {
  @apply relative h-6 w-11 rounded-full border border-solid border-purple-200-700 bg-purple-50-900 pl-0.5 transition-all hover:border-purple-300-600 focus:outline-none enabled:cursor-pointer disabled:opacity-40 data-[state=checked]:border-green-400-500 data-[state=checked]:bg-cyan-100-800;

  &-sm {
    @apply h-6 w-11;

    .c-switch-thumb {
      @apply h-4 w-4;

      &[data-state='checked']  {
        transform: translateX(20px);
      }
    }
  }

  &-xs {
    @apply h-5 w-9;

    .c-switch-thumb {
      @apply h-3.5 w-3.5;

      &[data-state='checked']  {
        transform: translateX(16px);
      }
    }
  }
}

.c-switch-thumb {
  @apply block origin-center translate-x-1 rounded-full bg-purple-400-500 transition-all;
  &[data-state='checked']  {
    @apply bg-green-500-400;
  }
}
