.c-switch-root {
  @apply relative 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;

      &.middle-position {
        transform: translateX(11px);
      }

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

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

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

      &.middle-position {
        transform: translateX(8px);
      }

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

.c-switch-thumb {
  @apply block origin-center translate-x-1 rounded-full bg-white transition-all;
  &[data-state='checked']  {
    @apply bg-white;
  }
  box-shadow: 0px 1px 2px 0px rgba(40, 41, 61, 0.2), 0px 2px 4px 0px rgba(96, 97, 112, 0.2);
}
