@import './inputtext';

.p-inputnumber {
  @apply relative inline-flex;
}

.p-inputnumber-button {
  @apply flex w-10 flex-shrink-0 flex-grow-0 basis-auto cursor-pointer items-center justify-center border border-surface-300 bg-transparent text-surface-400 transition-colors duration-200 enabled:hover:border-surface-300 enabled:hover:bg-surface-100 enabled:hover:text-surface-500 enabled:active:border-surface-300 enabled:active:bg-surface-200 enabled:active:text-surface-600 dark:border-surface-700 dark:bg-transparent dark:text-surface-400 dark:enabled:hover:border-surface-700 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-300 dark:enabled:active:border-surface-700 dark:enabled:active:bg-surface-700 dark:enabled:active:text-surface-200;
}

.p-inputnumber-stacked .p-inputnumber-button {
  @apply relative flex-auto border-none;
}

.p-inputnumber-stacked .p-inputnumber-button-group {
  @apply absolute end-px top-px z-10 flex h-[calc(100%-2px)] flex-col;
}

.p-inputnumber-stacked .p-inputnumber-increment-button {
  @apply rounded-tr-[5px] p-0;
}

.p-inputnumber-stacked .p-inputnumber-decrement-button {
  @apply rounded-br-[5px] p-0;
}

.p-inputnumber-horizontal .p-inputnumber-increment-button {
  @apply order-3 rounded-e-md border-s-0;
}

.p-inputnumber-horizontal .p-inputnumber-input {
  @apply order-2 rounded-none;
}

.p-inputnumber-horizontal .p-inputnumber-decrement-button {
  @apply order-1 rounded-s-md border-r-0;
}

.p-floatlabel:has(.p-inputnumber-horizontal) label {
  @apply ms-10;
}

.p-inputnumber-vertical {
  @apply flex-col;
}

.p-inputnumber-vertical .p-inputnumber-button {
  @apply py-2;
}

.p-inputnumber-vertical .p-inputnumber-increment-button {
  @apply order-1 w-full rounded-se-md rounded-ss-md border-b-0;
}

.p-inputnumber-vertical .p-inputnumber-input {
  @apply order-2 rounded-none text-center;
}

.p-inputnumber-vertical .p-inputnumber-decrement-button {
  @apply order-3 w-full rounded-ee-md rounded-es-md border-t-0;
}

.p-inputnumber-input {
  @apply flex-auto;
}

.p-inputnumber-fluid {
  @apply w-full;
}

.p-inputnumber-fluid .p-inputnumber-input {
  @apply w-[1%];
}

.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
  @apply w-full;
}
