.search-form-wrapper {
  @apply relative;
}
.search-form-wrapper .search-form-panel {
  @apply absolute;
  width: 250px;
  top: -8px;
  right: 100%;
}
.search-form-wrapper .search-form-panel input {
  @apply py-2
        px-4
        w-full
        rounded-sm;
}
.search-form-wrapper .search-form-panel .results {
  @apply mt-1
        p-0
        rounded-sm
        bg-white
        shadow
        w-full
        flex
        flex-col
        overflow-x-hidden
        overflow-y-auto
        text-black;
  max-height: 300px;
}
.search-form-wrapper .search-form-panel .results .loading {
  @apply flex
          items-center
          justify-center
          h-12
          py-2
          px-4;
}
.search-form-wrapper .search-form-panel .results .loading .spinner > div {
  @apply opacity-50;
}
.search-form-wrapper .search-form-panel .results .no-results {
  @apply text-gray-500
          h-12
          flex
          items-center
          px-4;
}
.search-form-wrapper .search-form-panel .results li {
  @apply m-0
          p-0
          block;
  line-height: 1;
}
.search-form-wrapper .search-form-panel .results li a {
  @apply block
            px-4
            py-2
            border-0
            whitespace-no-wrap;
}
.search-form-wrapper .search-form-panel .results li a:hover {
  @apply opacity-100
              text-white;
}
.search-form-wrapper .search-form-panel .results li a .type {
  @apply block
              text-xs
              text-gray-400;
}
.search-form-wrapper .fade-enter-active,
.search-form-wrapper .fade-leave-active {
  transition: all 0.25s ease;
  transform: translateX(0);
}
.search-form-wrapper .fade-enter,
.search-form-wrapper .fade-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}