@reference "tailwindcss";

.ts-control {
  border: none;
  background: inherit;
}

.ts-wrapper.multi .ts-control > div {
  @apply bg-[#dbeafe] text-primary-900!;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  @apply bg-transparent!;
}

.ts-dropdown [data-selectable] .highlight {
  @apply font-bold rounded-md bg-transparent;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  font-size: unset !important;
  color: unset !important;
  font-family: unset !important;
  /* z-index: 98; */
}

.ts-dropdown {
  @apply bg-white border-none shadow-lg rounded-md;
}

.ts-dropdown-content > .option {
  @apply m-1 p-2 rounded-md hover:bg-primary-700 hover:text-white;
}

.ts-dropdown-content > .option.active {
  @apply bg-primary-700 text-white;
}

.autocomplete-item,
.autocomplete-option {
  @apply text-gray-800! px-2 py-3 rounded-md;
}

.ts-control > .autocomplete-item {
  @apply text-gray-800! px-0 py-0;
}

.autocomplete-option:hover,
.autocomplete-item.active {
  @apply bg-primary-700! text-white!;
}

.autocomplete > .ts-control {
  @apply flex flex-nowrap text-wrap md:text-nowrap min-w-fit;
}

/* Address autocomplete styles */
.address-autocomplete-select {
  @apply text-sm text-gray-700;
}

.address-autocomplete-select > .ts-control {
  @apply bg-transparent border-none shadow-none p-0 min-h-0;
}

.address-autocomplete-select > .ts-control > input {
  @apply placeholder-gray-500 text-sm min-w-24 max-w-48;
}

.address-autocomplete-select > .ts-control > .item {
  @apply text-sm text-gray-700 bg-transparent p-0 m-0 max-w-40 truncate;
}

.address-autocomplete-select > .ts-dropdown {
  @apply mt-2 min-w-64 max-w-80 rounded-lg shadow-xl border border-gray-100;
}

.address-autocomplete-select .ts-dropdown-content > .option {
  @apply text-sm py-2.5 px-3;
}

/* .ts-dropdown.autocomplete {
  @apply p-2;
} */