.c-switch-root {
  /* @apply radix-state-checked:border-[#528693] radix-state-checked:bg-neptune h-4 w-7 rounded-full border border-solid border-[#52869399] bg-[#9095a84d] p-0 focus:outline-none focus:ring-1 focus:ring-[#528693] focus:ring-offset-1 disabled:opacity-40; */
  @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;
}

.c-switch-thumb {
  /* @apply block h-4 w-4 translate-x-[1px] transform-gpu rounded-full bg-purple-200-700 transition-all data-[state=checked]:translate-x-12 data-[state=checked]:bg-green-400-500; */
  @apply block h-4 w-4 origin-center translate-x-1 rounded-full bg-purple-400-500 transition-all;
  &[data-state='checked']  {
    transform: translateX(20px);
    @apply bg-green-500-400;
  }
}
