.autocomplete {
    @apply relative w-full;
}

.autocomplete[data-loading="true"]:after {
    @apply block absolute top-0 right-0;
    @apply absolute w-4 h-4 rounded-full right-0 mr-4;
    content: "";
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-right: 3px solid rgba(0, 0, 0, 0.48);
    top: 50%;
    transform: translateY(-50%);
    animation: rotate 1s infinite linear;
}

.autocomplete-icon {
    @apply absolute top-1/2 right-0 transform -translate-y-1/2 mr-4;
}
.autocomplete[data-loading="true"] .autocomplete-icon {
    @apply hidden;
}

.autocomplete-result-list {
    @apply bg-white shadow-md max-h-64 overflow-y-auto;
}

.autocomplete-result {
    @apply p-2;
}
.autocomplete-result:hover,
.autocomplete-result[aria-selected="true"] {
    @apply bg-gray-200;
}