@tailwind utilities;

[x-cloak] {
    display: none !important;
}

.fast-fuzzy-search {
    --color-primary: #3b82f6;
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-300: #bfdbfe;
    --color-primary-800: #1e3a8a;
}

.fast-fuzzy-search {
    @apply transition duration-700 ease-out-expo flex flex-col w-[31.25rem] max-w-[90%] z-[9999];
}

.fast-fuzzy-search,
.fast-fuzzy-search * {
    box-sizing: border-box;
}

.fast-fuzzy-search button:not([disabled]) {
    cursor: pointer;
}

.fast-fuzzy-search__scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.fast-fuzzy-search__scrollbar::-webkit-scrollbar-thumb {
    background: #747474;
    border-radius: 4px;
}

.fast-fuzzy-search__scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.fast-fuzzy-search__scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.fast-fuzzy-search__keyboard-shortcuts {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    white-space: nowrap;
}

.fast-fuzzy-search__keyboard-shortcuts svg {
    @apply w-3 h-auto;
}

.fast-fuzzy-search__chip {
    @apply inline-flex justify-center items-center whitespace-nowrap;
}

.fast-fuzzy-search__icon {
    @apply !shrink-0;
}

.fast-fuzzy-search__chip-button svg {
    @apply w-3 h-auto;
}

.fast-fuzzy-search[data-loading="true"] {}

.fast-fuzzy-search__panel-close {
    @apply absolute cursor-pointer border-0 top-4 right-4 w-10 h-10 inline-flex justify-center items-center z-[9999] transition duration-700 ease-out-expo;
}

.fast-fuzzy-search--scrolled {
    @apply opacity-0 pointer-events-none;
}

.fast-fuzzy-search__field {
    @apply overflow-hidden !text-left !p-0;
}

.fast-fuzzy-search__input {
    @apply !bg-inherit !text-inherit !border-0 !shadow-none !outline-none !m-0 !p-0 !w-full !h-full !leading-none !border-none flex flex-col justify-center items-start grow;
}

.fast-fuzzy-search__chip-button {
    @apply !leading-none;
}

.fast-fuzzy-search__context {
    @apply text-sm font-medium px-2 py-2 !mt-3 !mb-1 text-center;
}

.fast-fuzzy-search__result-link {
    @apply !no-underline;
}

.fast-fuzzy-search--bottom-center {
    @apply fixed bottom-4 left-1/2 max-h-[90vh];
    transform: translateX(-50%);
}

.fast-fuzzy-search--bottom-left {
    @apply fixed bottom-4 left-4 max-h-[90vh];
}

.fast-fuzzy-search--bottom-right {
    @apply fixed bottom-4 right-4 max-h-[90vh];
}

.fast-fuzzy-search__icon-button {
    @apply cursor-pointer z-[9999] !w-14 !h-14 !p-0 inline-flex justify-center items-center;   
}

.fast-fuzzy-search__button {
    @apply cursor-pointer z-[9999] !h-14 inline-flex justify-center items-center gap-2;
}

/* Transitions */

.fast-fuzzy-search__transition-enter .fast-fuzzy-search {
    opacity: 0;
    transform: translateY(5rem);
}

.fast-fuzzy-search__transition-leave {
    @apply transition duration-400 ease-out-expo;
}

.fast-fuzzy-search__transition-leave-start {
    opacity: 1;
}

.fast-fuzzy-search__transition-leave-end {
    opacity: 0;
}

.fast-fuzzy-search__transition-leave-start .fast-fuzzy-search {
    opacity: 1;
    transform: scale(1);
}

.fast-fuzzy-search__transition-leave-end .fast-fuzzy-search {
    opacity: 0;
    transform: scale(0.95);
}

.fast-fuzzy-search__transition-enter .fast-fuzzy-search__panel-close,
.fast-fuzzy-search__transition-leave .fast-fuzzy-search__panel-close {
    opacity: 0;
    transform: scale(0.5);
}

/* Minimal Light */
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__field {
    @apply flex justify-start items-center w-full h-12 bg-white border border-solid border-neutral-300 shadow-lg rounded-lg;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__input,
.fast-fuzzy-search--minimal-light .fast-fuzzy-search__input::placeholder {
    @apply !text-neutral-600 !text-sm !font-semibold;
}

.fast-fuzzy-search--minimal-light[data-has-query="true"] .fast-fuzzy-search__field {
    @apply rounded-bl-none rounded-br-none;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__icon {
    @apply text-neutral-700 inline-flex justify-center items-center !w-12 !h-full;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__clear button {
    @apply inline-flex justify-center items-center !w-6 !h-6 !p-1 !m-0 border-none bg-neutral-100 text-neutral-600 rounded-full hover:bg-neutral-200;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__post-types {
    @apply px-5 py-4 border-0 border-b border-solid border-neutral-300 bg-neutral-50 text-neutral-900;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip-button {
    @apply inline-flex !text-sm gap-2 justify-center items-center transition text-neutral-700 rounded-full border border-solid border-neutral-300 py-1.5 pr-3 pl-3 shrink-0 bg-white no-underline hover:bg-neutral-50 aria-selected:bg-primary-900 aria-selected:text-primary-600 aria-selected:border-primary-600;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__results {
    @apply bg-transparent text-neutral-900 w-full h-96 grow overflow-y-scroll list-none m-0 px-2;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__panel {
    @apply bg-white border border-t-0 border-solid border-neutral-300 shadow-lg rounded-bl-lg rounded-br-lg text-sm;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-item {
    @apply py-2 w-full;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link {
    @apply text-neutral-900 px-4 py-4 text-sm font-medium aria-selected:bg-neutral-100 hover:bg-neutral-100 rounded-lg;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__empty {
    @apply p-10 bg-white text-neutral-600 text-sm;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__keyboard-shortcuts {
    @apply text-xs font-medium px-5 py-2 border-0 border-t border-neutral-200 border-solid bg-neutral-50 text-neutral-600;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-icon {
    @apply bg-neutral-200 text-neutral-700 rounded p-2 mr-4 w-8 h-8 shrink-0 group-aria-selected:shadow group-aria-selected:bg-white;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-image {
    @apply w-8 !h-8 shrink-0 mr-4 rounded object-cover;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__chip {
    @apply !text-xs px-2 py-1 rounded-full font-semibold transition bg-neutral-200 text-neutral-700 no-underline;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-image {
    @apply shadow bg-white;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip {
    @apply shadow bg-white;
}

.fast-fuzzy-search--minimal-light .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon {
    @apply shadow bg-white;
}

.fast-fuzzy-search__panel-close--minimal-light {
    @apply bg-white text-black p-2 rounded-full hover:bg-white focus:bg-white hover:text-black focus:text-black;
}

/* Minimal Dark */
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__field {
    @apply flex justify-start items-center w-full h-12 bg-neutral-900 border border-solid border-neutral-700 shadow-lg rounded-lg group-focus-within:border-neutral-900;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input,
.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__input::placeholder {
    @apply !text-neutral-300;
}

.fast-fuzzy-search--minimal-dark[data-has-query="true"] .fast-fuzzy-search__field {
    @apply rounded-bl-none rounded-br-none;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__icon {
    @apply text-neutral-100 inline-flex justify-center items-center w-12 h-full;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__clear button {
    @apply inline-flex justify-center items-center !w-6 !h-6 !p-1 !m-0 border-none bg-neutral-700 text-neutral-100 rounded-full hover:bg-neutral-800;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__post-types {
    @apply px-5 py-4 border-0 border-b border-solid border-neutral-700 bg-neutral-800 text-neutral-50;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip-button {
    @apply !text-sm inline-flex gap-2 justify-center items-center transition text-neutral-100 rounded-full border border-solid border-neutral-600 py-1.5 pr-3 pl-3 shrink-0 bg-neutral-900 hover:bg-neutral-800 aria-selected:bg-primary-500 aria-selected:text-white aria-selected:border-primary-300;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__panel {
    @apply bg-neutral-900 border border-t-0 border-solid border-neutral-700 rounded-bl-lg rounded-br-lg text-sm;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__results {
    @apply bg-neutral-900 text-neutral-50 w-full h-96 grow overflow-y-scroll list-none m-0 px-2;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-item {
    @apply py-2 w-full;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link {
    @apply text-neutral-100 px-4 py-4 text-sm font-medium no-underline aria-selected:bg-neutral-800 hover:bg-neutral-800 rounded-lg;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__empty {
    @apply p-10 bg-neutral-900 text-neutral-100 text-sm;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__keyboard-shortcuts {
    @apply text-xs font-medium px-5 py-2 border-0 border-t border-neutral-700 border-solid bg-neutral-800 text-neutral-100;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-icon {
    @apply bg-neutral-700 text-neutral-100 rounded p-2 mr-4 w-8 h-8 shrink-0 group-aria-selected:shadow group-aria-selected:bg-neutral-900;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-image {
    @apply w-8 !h-8 shrink-0 mr-4 rounded object-cover;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__chip {
    @apply text-xs px-2 py-1 rounded-full font-semibold transition bg-neutral-700 text-neutral-100 group-aria-selected:shadow group-aria-selected:bg-neutral-900;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__chip {
    @apply shadow bg-neutral-700;
}

.fast-fuzzy-search--minimal-dark .fast-fuzzy-search__result-link[aria-selected="true"] .fast-fuzzy-search__result-icon {
    @apply shadow bg-neutral-700;
}

.fast-fuzzy-search__panel-close--minimal-dark {
    @apply bg-neutral-900 text-white p-2 rounded-full hover:bg-neutral-800 focus:bg-neutral-800 hover:text-white focus:text-white;
}