@import '../custom.less';

@autocomplete-prefix-cls: ~'@{css-prefix}autocomplete';
@icon-loading-prefix-cls: ~'@{css-prefix}icon-loading';
@popper-prefix-cls: ~'@{css-prefix}popper';
@scrollbar-prefix-cls: ~'@{css-prefix}scrollbar';

.@{autocomplete-prefix-cls} {
  @apply relative;
  @apply inline-block;

  &.show-auto-width {
    @apply w-full;
  }

  &-suggestion {
    @apply rounded;
    @apply bg-color-bg-1;
    @apply box-border;
    @apply shadow-md;

    .@{scrollbar-prefix-cls} {
      @apply rounded;
      @apply pt-1;
    }

    &__wrap {
      @apply ~'max-h-[theme(spacing.72)]';
      @apply box-border;
    }

    // 兼容ie10-ie11
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      &__wrap {
        margin-bottom: -17px !important;
        @apply ~'pb-1.5';
      }
    }

    &__list {
      @apply m-0;
      @apply p-0;
    }

    & &__list-item {
      @apply py-0 px-3;
      @apply m-0;
      @apply leading-8;
      @apply text-color-text-primary;
      @apply text-xs;
      @apply list-none;
      @apply whitespace-nowrap;
      @apply overflow-hidden;
      @apply text-ellipsis;
      @apply cursor-pointer;

      &.highlighted,
      &:hover {
        @apply bg-color-bg-3;
      }

      &.divider {
        @apply ~'mt-1.5';
        @apply border-t border-t-color-border;

        &:last-child {
          @apply ~'-mb-1.5';
        }
      }

      &:only-of-type {
        &,
        &:hover {
          @apply bg-color-bg-3;
        }
      }
    }

    &.is-loading &__list-loading {
      @apply text-center;
      @apply h-8;
      @apply leading-8;
      @apply text-xl;

      svg {
        @apply fill-color-brand;
      }

      &::after {
        @apply inline-block;
        @apply content-[''];
        @apply h-full;
        @apply align-middle;
      }

      &:hover {
        @apply bg-color-bg-1;
      }
    }

    &.is-loading {
      .@{icon-loading-prefix-cls} {
        @apply align-middle;
      }
    }

    &.@{popper-prefix-cls}[x-placement^='bottom'] {
      @apply ~'mt-0.5';
    }
  }
}
