.haloe-search-bar {
    color: #999999 // ★待定
  }
  &:not(.haloe-search-bar-disabled) {
    // &:hover .@{css-prefix}input-group-append
    // ,
    // input:focus + .@{css-prefix}input-group-append,
    // input:hover + .@{css-prefix}input-group-append
    .@{css-prefix}input-group-append:hover {
      border-color: #337DFF; // ★待定
      background-color: #337DFF; // ★待定
      .suffix-btn {
        i {
          color: @color-functional-white;
        }
      }
    }
    &:hover input {
      border-color: #337DFF; // ★待定
    }
  }
  .@{css-prefix}input-group-append,
  input:hover + .@{css-prefix}input-group-append
  {
    transition: border-color  @transition-time @ease-in-out, background-color @transition-time @ease-in-out;
    width: 32px;
    .suffix-btn {
      width: 32px;
      height: 100%;
      position: absolute;
      top: 0px;
      right: 0px;
      z-index: 100;
      i {
        margin-top: 7px;
        transition: color @transition-time @ease-in-out;
      }
    }
  }

  .@{css-prefix}input-prefix, .@{css-prefix}input-group-append {
    cursor: pointer;
  }

  &.haloe-search-bar-disabled {
    .@{css-prefix}input-prefix, .@{css-prefix}input-group-append {
      cursor: not-allowed;
    }
    .haloe-select-disabled .haloe-select-selection .haloe-select-arrow {
      display: inline-block;
    }
  }
  .@{css-prefix}input-icon-clear {
    color: #cccccc; // ★待定
    font-size: 15px;
  }
  &-suffix {
    .@{css-prefix}input-icon-clear {
      right: 32px;
    }
    .cmss-icon.icon-search {
      font-size: 15px;
    }
  }
  .@{css-prefix}select-visible .@{css-prefix}select-selection {
    border-color: transparent;
    &:hover {
      border-color: transparent;
    }
  }
  .@{css-prefix}select-selection:hover, .@{css-prefix}select-selection-focused {
    border-color: transparent;
  }
  .@{css-prefix}select-selection {
    .@{css-prefix}select-selected-value, .@{css-prefix}select-placeholder {
      text-align: left;
    }
  }
  &-filter {
    position: relative;
    .@{css-prefix}input {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }
    .@{css-prefix}input-group-prepend {
      position: absolute;
      z-index: 10;
      border: transparent;
      background-color: transparent;
      .search-bar-select-wrapper {
        position: relative;
        .filter-select {
          display: inline-block;
          margin-top: -3px;
          .@{css-prefix}select-arrow {
            margin-top: -6px;
            color: #999999; // ★待定
          }
          &.haloe-select-disabled .haloe-select-selection {
            border: 1px solid #D9D9D9; // ★待定
            border-right-color: transparent;
          }
        }
      }
      .search-bar-devided-line {
        display: inline-block;
        border-right: 1px solid #D9D9D9; // ★待定
        height: 18px;
        top: 3px;
        z-index: 10;
        padding-left: 6px;
        width: 1px;
        position: absolute;
      }
    }
  }
}

.haloe-search-bar {
  &.haloe-input-wrapper {
    .@{css-prefix}input-prefix i, .@{css-prefix}input-suffix i {
      font-size: 15px;
      line-height: @input-height-base;
    }
  }
  &.haloe-input-wrapper-large {
    .@{css-prefix}input-prefix i, .@{css-prefix}input-suffix i {
      font-size: 15px;
      // width: 100%;
      line-height: @input-height-large;
    }
  }
  &.haloe-input-wrapper-small {
    .@{css-prefix}input-prefix i, .@{css-prefix}input-suffix i {
      font-size: 15px;
      line-height: @input-height-small;
    }
  }
}