@reference "tailwindcss";

/* Autocomplete.js styles using Tailwind */
.autoComplete_wrapper {
  @apply block w-full relative;
}

.autoComplete_wrapper > ul {
  @apply absolute max-h-56 overflow-y-auto top-full left-0 right-0 p-0 mt-2 rounded bg-white border border-gray-800/10 z-[1000] outline-none;
}

.autoComplete_wrapper > ul > li {
  @apply flex flex-col gap-0.5 py-2.5 px-5 list-none text-left text-base text-gray-900 transition-all duration-200 ease-in-out rounded-sm bg-white truncate;
}

.autoComplete_wrapper > ul > li::selection {
  @apply text-transparent bg-transparent;
}

.autoComplete_wrapper > ul > li:hover {
  @apply cursor-pointer bg-gray-500/10;
}

.autoComplete_wrapper > ul > li mark {
  @apply inline bg-transparent text-primary-600 font-bold;
}

.autoComplete_wrapper > ul > li mark::selection {
  @apply text-transparent bg-transparent;
}

.autoComplete_wrapper > ul > li[aria-selected="true"] {
  @apply bg-gray-500/10;
}