@import './inputtext';
@import './iconfield';

.p-listbox {
  @apply rounded-md border border-surface-300 bg-surface-0 text-surface-700 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)] transition-colors duration-200 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-0;
}

.p-listbox.p-focus {
  @apply border-primary;
}

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

.p-listbox.p-disabled .p-listbox-option {
  @apply cursor-default text-surface-500 dark:text-surface-400;
}

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

.p-listbox-header {
  @apply px-4 pb-1 pt-2;
}

.p-listbox-filter {
  @apply w-full;
}

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

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

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

.p-listbox-striped li:nth-child(even of .p-listbox-option) {
  @apply bg-surface-50 dark:bg-surface-900;
}

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

.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
  @apply bg-highlight-emphasis;
}

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

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

.p-listbox-option-check-icon {
  @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0;
}

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

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