/* HotwireCombobox styles — global overrides for Tailwind integration */

.hw-combobox {
  --hw-border-color: transparent;
  --hw-border-width--slim: 0px;
  --hw-border-width--thick: 0px;
  --hw-combobox-width: 100%;
  --hw-padding--slim: 0px;

  width: 100%;
  padding: 0;
}

.hw-combobox__main__wrapper {
  padding: 0;
}

.hw-combobox__input {
  @apply w-full appearance-none border border-gray-300 rounded-md
    shadow-sm px-3 py-2 text-sm outline-none
    focus:border-gondola;
}

/* Position the dropdown handle */
.hw-combobox__handle {
  @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer;
}

/* Dropdown listbox */
.hw-combobox__listbox {
  @apply mt-1 max-h-80 w-full border border-gray-300 rounded-lg
    shadow-md bg-white z-50 overflow-y-auto absolute;
}

/* Mobile dialog */
.hw-combobox__dialog__input {
  @apply w-full appearance-none border border-gray-300 rounded-md
    shadow-sm px-3 py-2 text-sm outline-none
    focus:border-gondola;
}

/* Ensure the combobox dialog is positioned correctly */
.hw-combobox__dialog__wrapper {
  @apply fixed inset-0 z-100 hidden;
}

.hw-combobox__dialog {
  @apply w-full max-w-md mx-auto mt-8 p-4 bg-white rounded-lg shadow-lg;
}

/* Options styling */
.hw-combobox [role="option"] {
  @apply px-3 py-2 cursor-pointer;
}

.hw-combobox [role="option"][aria-selected="true"] {
  @apply bg-gray-100;
}

.hw-combobox [role="option"]:hover:not([aria-selected="true"]) {
  @apply bg-gray-50;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .hw-combobox__listbox {
    @apply max-h-64;
  }
}

/* Loading state */
.hw-combobox__loading {
  @apply flex items-center justify-center p-2 text-gray-500 text-sm;
}

.hw-combobox__loading::after {
  content: "Loading...";
}

/* Empty state */
.hw-combobox__empty {
  @apply px-3 py-2 text-gray-500 text-sm;
}

/* Pagination styling */
.hw_combobox__pagination__wrapper {
  @apply p-2 text-center border-t border-gray-200 text-sm text-gondola;
}