@import './inputtext';
@import './chip';

.p-autocomplete {
  @apply inline-flex;
}

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

.p-autocomplete-loader {
  @apply absolute end-3 top-1/2 -mt-2;
}

.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
  @apply end-[3.25rem];
}

.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
  @apply w-[1%] flex-auto;
}

.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
  @apply rounded-e-none;
}

.p-autocomplete-dropdown {
  @apply relative inline-flex w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded-e-md bg-surface-100 text-surface-600 transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary enabled:hover:bg-surface-200 enabled:hover:text-surface-700 enabled:active:bg-surface-300 enabled:hover:active:text-surface-800 dark:bg-surface-800 dark:text-surface-300 dark:enabled:hover:bg-surface-700 dark:enabled:hover:text-surface-200 dark:enabled:active:bg-surface-600 dark:enabled:active:text-surface-100;
}

.p-autocomplete .p-autocomplete-overlay {
  @apply min-w-full;
}

.p-autocomplete-overlay {
  @apply absolute left-0 top-0 rounded-md border border-surface-200 bg-surface-0 text-surface-700 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)] dark:border-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-autocomplete-list-container {
  @apply overflow-auto;
}

.p-autocomplete-list {
  @apply m-0 flex list-none flex-col gap-[2px] p-1;
}

.p-autocomplete-option {
  @apply relative flex cursor-pointer items-center overflow-hidden whitespace-nowrap rounded-sm border-none bg-transparent px-3 py-2 text-surface-700 transition-colors duration-200 dark:text-surface-0;
}

.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
  @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0;
}

.p-autocomplete-option-selected {
  @apply bg-highlight;
}

.p-autocomplete-option-selected.p-focus {
  @apply bg-highlight-emphasis;
}

.p-autocomplete-option-group {
  @apply m-0 bg-transparent px-3 py-2 font-semibold text-surface-500 dark:text-surface-400;
}

.p-autocomplete-input-multiple {
  @apply m-0 flex w-full cursor-text list-none flex-wrap items-center gap-1 overflow-hidden rounded-md border border-surface-300 bg-surface-0 px-3 py-1 text-surface-700 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] outline-none transition-colors duration-200 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-0;
}

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

.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
  @apply border-primary;
}

.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
  @apply border-red-400 dark:border-red-300;
}

.p-variant-filled.p-autocomplete-input-multiple {
  @apply bg-surface-50 dark:bg-surface-800;
}

.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
  @apply cursor-default bg-surface-200 text-surface-500 opacity-100 dark:bg-surface-700 dark:text-surface-400;
}

.p-autocomplete-chip.p-chip {
  @apply rounded-sm py-1;
}

.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
  @apply px-1;
}

.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
  @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0;
}

.p-autocomplete-input-chip {
  @apply inline-flex flex-auto py-1;
}

.p-autocomplete-input-chip input {
  @apply m-0 w-full rounded-none border-none bg-transparent p-0 text-inherit shadow-none outline-none;
}

.p-autocomplete-input-chip input::placeholder {
  @apply text-surface-500 dark:text-surface-400;
}

.p-autocomplete-empty-message {
  @apply px-3 py-2;
}

.p-autocomplete-fluid {
  @apply flex;
}

.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
  @apply w-[1%];
}
