/* HotwireCombobox styles with Tailwind integration */

.simple_form {
  .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;
    /* @apply w-full relative border-0 shadow-none; */
  }

  /* Properly style the input to match other form controls */
  .hw-combobox__input {
    @apply w-full appearance-none border border-gray-300 rounded-md shadow-sm 
      px-3 py-2 text-sm outline-none;
  }

  /* 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;
  }

  /* 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 */
  [role="option"] {
    @apply px-3 py-2 cursor-pointer;
  }

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

  [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-blue-500;
  }
}