.#{$ns}IconPickerControl {
  @include input-text();

  &-placeholder {
    color: $Form-input-placeholderColor;
    user-select: none;
    position: absolute;
    left: $Form-input-paddingX;
    top: $Form-input-paddingY;
    margin-top: 2 * $Form-input-borderWidth;
    line-height: $Form-input-lineHeight;
  }

  &-valueWrap {
    flex-grow: 1;
    line-height: 1;
    white-space: nowrap;

    > input {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }
  }

  &-input--withAC {
    position: relative;
    flex-wrap: wrap;

    > input {
      width: auto;
    }
  }

  &-sugsPanel {
    position: absolute;
    background: $Form-select-menu-bg;
    color: $Form-select-menu-color;
    border: $Form-input-borderWidth solid $Form-input-onFocused-borderColor;
    left: px2rem(-1px);
    right: px2rem(-1px);
    top: 100%;
    z-index: 10;
    height: auto;
  }

  &-tabs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11;
    background: $IconPicker-tabs-bg;
  }

  &-tab {
    display: inline-block;
    padding: $IconPicker-tab-padding;
    height: $IconPicker-tab-height;
    line-height: $IconPicker-tab-lineHeight;
    cursor: pointer;
    text-align: center;

    &.active {
      background: $IconPicker-tab-onActive-bg;
    }
  }

  &-singleVendor {
    padding: $IconPicker-singleVendor-padding;
  }

  &-multiVendor {
    padding: $IconPicker-multiVendor-padding;
  }

  &-sugs {
    position: relative;
    max-height: $IconPicker-content-maxHeight;
    overflow-y: scroll;
  }

  &-sugItem {
    display: inline-block;
    width: $IconPicker-sugItem-width;
    height: $IconPicker-sugItem-height;
    text-align: center;
    line-height: $IconPicker-sugItem-lineHeight;
    cursor: pointer;
  }

  &-value {
    user-select: none;
    line-height: $Form-input-lineHeight * $Form-input-fontSize;
    vertical-align: middle;
    display: inline-block;

    > i {
      display: inline-block;
      margin-right: $IconPicker-selectedIcon-marginRight;
    }
  }
}