.p-toggleswitch {
  @apply inline-block h-6 w-10;
}

.p-toggleswitch-input {
  @apply absolute start-0 top-0 z-10 m-0 h-full w-full cursor-pointer appearance-none rounded-[30px] p-0 opacity-0 disabled:cursor-default;
}

.p-toggleswitch-slider {
  @apply inline-block h-full w-full rounded-[30px] border border-transparent bg-surface-300 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] transition-colors duration-200 dark:bg-surface-700;
}

.p-toggleswitch-handle {
  @apply absolute start-1 top-1/2 -mt-2 flex h-4 w-4 items-center justify-center rounded-full bg-surface-0 text-surface-500 transition-[background,color,left] duration-200 dark:bg-surface-400 dark:text-surface-900;
}

.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
  @apply bg-primary;
}

.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
  @apply start-5 bg-surface-0 text-primary dark:bg-surface-900;
}

.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
  @apply bg-surface-400 dark:bg-surface-600;
}

.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
  @apply bg-surface-0 text-surface-700 dark:bg-surface-300 dark:text-surface-800;
}

.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked
  .p-toggleswitch-slider {
  @apply bg-primary-emphasis;
}

.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked
  .p-toggleswitch-handle {
  @apply bg-surface-0 text-primary-emphasis dark:bg-surface-900;
}

.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
  @apply outline outline-1 outline-offset-2 outline-primary;
}

.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
  @apply border-red-400 dark:border-red-300;
}

.p-toggleswitch.p-disabled {
  @apply opacity-100;
}

.p-toggleswitch.p-disabled .p-toggleswitch-slider {
  @apply bg-surface-200 dark:bg-surface-600;
}

.p-toggleswitch.p-disabled .p-toggleswitch-handle {
  @apply bg-surface-700 dark:bg-surface-900;
}
