@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(auto-complete) {
  display: inline-flex;
  @include e(wrapper) {
    padding: 4px 0;
    box-sizing: border-box;
    background-color: getCssVar("color", "bg-3");
    box-shadow: getCssVar("shadow", "1");
    border-radius: getCssVar("radius", "medium");
    border: 1px solid getCssVar("color", "fill-3");
  }

  @include e(empty) {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @include e(list) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @include e(item) {
    margin: 2px 0;
    font-size: getCssVar("font-size", "medium");
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: getCssVar("color", "text-1");
    cursor: pointer;
    padding: 0 16px;

    &:hover {
      background-color: getCssVar("color", "fill-2");
      color: getCssVar("color", "primary-6");
    }

    @include when(active) {
      color: getCssVar("color", "primary-6");
    }

    @include when(highlight) {
      background-color: getCssVar("color", "fill-2");
      color: getCssVar("color", "primary-6");
    }
  }

  @each $size in $size-list {
    @include m(#{$size}) {
      @include be(auto-complete, item) {
        height: getCssVar("size", #{$size});
        line-height: getCssVar("size", #{$size});
      }
    }
  }
}