@use "../../style/index" as mixins;

$prefix: "adui-suggest";
.#{$prefix} {
  position: relative;
  display: inline-block;
  width: 171px; // Chrome input 默认宽度

  &-open {
    .#{$prefix} {
      &-selection__rendered {
        &::after {
          display: none;
        }
      }
    }
  }

  &-search {
    list-style: none;
  }

  &-search__field {
    width: 100%;
    height: 100%;
    font-size: 100%;
    line-height: 1;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    outline: none;
    @include mixins.placeholder();

    &__mirror {
      position: absolute;
      top: 0;
      left: 0;
      white-space: pre;
      pointer-events: none;
      opacity: 0;
    }
  }

  &-selection__rendered {
    position: relative;
    display: block;

    &::after {
      display: inline-block;
      width: 0;
      visibility: hidden;
      pointer-events: none;
      // content: '.';
    }

    > ul {
      margin: 0;
      padding: 0;
    }
  }

  &-selection-search-input {
    width: 100%;
  }

  &-selection-selected-value {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  &-dropdown {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: var(--z-index-dropdown);
    background-color: #fff;
    border-radius: 6px;
    box-shadow: var(--box-shadow-elevation-2);

    &:empty {
      box-shadow: none;
    }

    [role*="listbox"] + div {
      @include mixins.overlay();
    }

    .#{$prefix}-dropdown-menu-item {
      padding-left: 8px;
      padding-right: 8px;
      font-size: var(--font-size-small);
    }
  }

  &-dropdown-hidden {
    display: none;
  }

  &-dropdown-menu {
    margin: 0;
    max-height: 250px;
    list-style: none;
    @include mixins.overlay();
  }

  &-item-option {
    flex: none;
    position: relative;
    padding-left: 16px;
    padding-right: 16px;
    font-size: var(--font-size-small);
    line-height: 32px;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color var(--motion-duration-fast) var(--ease-in-out);

    &-content {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &:hover {
      background-color: var(--gray-200);
    }

    &:active {
      background-color: var(--gray-300);
    }

    &-active {
      background-color: var(--gray-200);
    }

    &-disabled {
      color: var(--gray-700);
      cursor: not-allowed;

      &:hover {
        background-color: #fff;
        cursor: not-allowed;
      }
    }

    &-group-list {
      padding: 0;
      list-style: none;
    }
  }
}