@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
@use "../../../styles/mixins/scrollbar" as scrollbar;

.contactSearch {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  @include theme() {
    background-color: get(bg-color-operate);
  }

  &__preSearch {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    padding: 12px;
    cursor: pointer;
  }

  &__add {
    border-radius: 4px;

    @include theme() {
      color: get(text-color-primary);
      background-color: get(bg-color-input);
    }
  }

  &__label {
    @include theme() {
      color: get(text-color-primary);
    }
  }

  &__search {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 10;
  }

  &__searchBarBox {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  &__searchBar {
    flex: 1;
    padding-left: 0;
    padding-right: 0;
  }

  &__cancel {
    font-weight: 400;
    font-size: 12px;

    @include theme() {
      color: get(text-color-primary);
    }
  }
}