.p-checkbox {
  @apply relative inline-flex h-5 w-5 select-none align-bottom;
}

.p-checkbox-input {
  @apply absolute start-0 top-0 z-10 m-0 h-full w-full cursor-pointer appearance-none rounded-sm border border-transparent p-0 opacity-0 disabled:cursor-default;
}

.p-checkbox-box {
  @apply flex h-5 w-5 items-center justify-center rounded-sm border border-surface-300 bg-surface-0 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] transition-colors duration-200 dark:border-surface-700 dark:bg-surface-950;
}

.p-checkbox-icon {
  @apply h-[0.875rem] w-[0.875rem] text-sm text-surface-700 transition-colors duration-200 dark:text-surface-0;
}

.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
  @apply border-surface-400 dark:border-surface-600;
}

.p-checkbox-checked .p-checkbox-box {
  @apply border-primary bg-primary;
}

.p-checkbox-checked .p-checkbox-icon {
  @apply text-primary-contrast;
}

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

.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
  @apply text-primary-contrast;
}

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

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

.p-checkbox.p-variant-filled .p-checkbox-box {
  @apply bg-surface-50 dark:bg-surface-800;
}

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

.p-checkbox.p-disabled .p-checkbox-box {
  @apply border-surface-300 bg-surface-200 dark:border-surface-700 dark:bg-surface-400;
}

.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
  @apply text-surface-700 dark:text-surface-900;
}

.p-checkbox-sm,
.p-checkbox-sm .p-checkbox-box {
  @apply h-4 w-4;
}

.p-checkbox-sm .p-checkbox-icon {
  @apply h-3 w-3;
}

.p-checkbox-lg,
.p-checkbox-lg .p-checkbox-box {
  @apply h-6 w-6;
}

.p-checkbox-lg .p-checkbox-icon {
  @apply h-4 w-4;
}
