/* 
  Use the following to reproduce a Tailwind UI Select field with Tom Select 
*/

.ts-wrapper.focus .ts-control:focus {
  outline-color: var(--color-sky-500);
}

.ts-control {
  @apply mt-2 w-full rounded-lg border border-gray-300 py-1 px-3 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 h-9 sm:text-sm sm:leading-6;
  font-size:16px;
  line-height: 24px;
  border-radius: var(--radius-lg);
}

.ts-control input {
  @apply !pr-5 text-sm !m-0;
  font-size:16px;
  line-height: 24px;
  color: var(--color-sky-500);

}

.ts-wrapper.plugin-remove_button .item {
  @apply rounded-lg;
}
.ts-wrapper.multi .ts-control > div {
  @apply p-0 m-0 pl-1;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply border-none text-lg leading-none py-1 rounded-r-lg;
}

.ts-dropdown {
  @apply rounded-lg border border-solid border-t border-gray-300;
  font-size:16px;
  line-height: 24px;
}

.ts-control,.ts-control input,.ts-dropdown {
  font-family: inherit;
  font-size:16px !important;
  line-height: 24px !important;
}

.dropdown-active .ts-control {
  border-radius: var(--radius-lg);
}

.ts-dropdown [data-selectable].option, .ts-dropdown .no-results {
  @apply py-2;
  font-size:16px;
  line-height: 24px;
}
.ts-dropdown [data-selectable].option:first-child {
  @apply rounded-t-md;
}

.ts-dropdown [data-selectable].option:last-child {
  @apply rounded-b-md;
}
.ts-dropdown .create:hover, .ts-dropdown .option:hover, .ts-dropdown .active {
  @apply bg-indigo-100 text-indigo-900;
  font-size:16px;
  line-height: 24px;
}

.ts-dropdown .spinner {
  @apply h-auto w-auto;
}

.ts-dropdown .spinner:after {
  @apply h-5 w-5 border-2 p-0 my-0 inline-block;
}

.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  print-color-adjust: exact;
}