.bx-search{
  .flexbox();
  .align-items(center);
  padding: 7px 15px;
  background-color: #F2F2F2;
  &.bx-search--top{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .bx-search-form{
    position: relative;
    box-sizing: border-box;
    .flex();
    width: 100%;
    background-color: #FFF;
    padding: 6px 32px;
    .bx-search-input{
      .input();
      .placeholder(13px, @textColorPatch, 17px);
      display: block;
      width: 100%;
      height: 18px;
      line-height: normal;
      border-radius: 2px;
      font-size: 13px;
      color: @textColorPrimary;
    }
    .bx-search-icon{
      position: absolute;
      top: 50%;
      left: 8px;
      font-size: 16px;
      color: @textColorPatch;
      transform: translateY(-50%);
    }
    .bx-search-clear{
      position: absolute;
      top: 50%;
      right: 8px;
      font-size: 16px;
      color: @textColorPatch;
      transform: translateY(-50%);
    }
  }
  .bx-search-btn{
    margin-left: 15px;
    padding: 6px 0;
    font-size: 15px;
    color: @textColorMinor;
  }
}