.p-togglebutton {
  @apply relative inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-md border border-surface-100 bg-surface-100 px-4 py-2 text-base font-medium text-surface-500 transition-colors duration-300 before:absolute before:start-1 before:top-1 before:h-[calc(100%-0.5rem)] before:w-[calc(100%-0.5rem)] before:rounded-md before:bg-transparent before:transition-colors before:duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-default disabled:border-surface-200 disabled:bg-surface-200 disabled:text-surface-500 disabled:opacity-100 dark:border-surface-950 dark:bg-surface-950 dark:text-surface-400 disabled:dark:border-surface-700 disabled:dark:bg-surface-700 disabled:dark:text-surface-400;
}

.p-togglebutton-content {
  @apply relative inline-flex items-center justify-center gap-2;
}

.p-togglebutton-label,
.p-togglebutton-icon {
  @apply relative transition-none;
}

.p-togglebutton.p-togglebutton-checked::before {
  @apply bg-surface-0 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)] dark:bg-surface-800;
}

.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
  @apply bg-surface-100 text-surface-700 dark:bg-surface-950 dark:text-surface-300;
}

.p-togglebutton.p-togglebutton-checked {
  @apply border-surface-100 bg-surface-100 text-surface-900 dark:border-surface-950 dark:bg-surface-950 dark:text-surface-0;
}

.p-togglebutton.p-invalid {
  @apply border-red-400 dark:border-red-300;
}

.p-togglebutton-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
  @apply text-surface-700 dark:text-surface-300;
}

.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
  @apply text-surface-900 dark:text-surface-0;
}

.p-togglebutton:disabled .p-togglebutton-icon {
  @apply text-surface-500 dark:text-surface-400;
}

.p-togglebutton-sm {
  @apply px-[0.75rem] py-[0.375rem] text-sm;
}

.p-togglebutton-lg {
  @apply px-[1.25rem] py-[0.625rem] text-lg;
}
