.search-form-wrapper {
  @apply
    relative;

  .search-form-panel {
    @apply
      absolute;

    width: 250px;
    top: -8px;
    right: 100%;

    input {
      @apply
        py-2
        px-4
        w-full
        rounded-sm;
    }

    .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;

      .loading {
        @apply
          flex
          items-center
          justify-center
          h-12
          py-2
          px-4;

        .spinner > div {
          @apply
            opacity-50;
        }
      }

      .no-results {
        @apply
          text-gray-500
          h-12
          flex
          items-center
          px-4;
      }

      li {
        @apply
          m-0
          p-0
          block;

        line-height: 1;

        a {
          @apply
            block
            px-4
            py-2
            border-0
            whitespace-no-wrap;

          &:hover {
            @apply
              opacity-100
              text-white;
          }

          .type {
            @apply
              block
              text-xs
              text-gray-400;
          }
        }
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.25s ease;
    transform: translateX(0);
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translateX(-20px);
  }
}
