@search-prefix: ~"@{prefix}search";

.@{search-prefix}{
  min-width: 150px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  &-block{
    display: block;
  }

  .h-search-container{
    display: flex;
    .h-search-input{
      position: relative;
      flex: 1;
      input{
        width:100%;
        padding-right: 30px;
      }
    }
  }
  
  >.h-icon-search,.h-icon-close{
    .middle();
    right: 8px;
  }

  &.h-search-has-button{
    input{
      border-radius: @border-radius 0 0 @border-radius;
    }
    .h-btn{
      height: @input-height;
      line-height: @input-height - 2px;
      padding-top: 0;
      padding-bottom: 0;
      border-radius: 0 @border-radius @border-radius 0;
      margin-left: -1px;
    }
    .h-icon-search-end {
      display: none;
    }
  }
  
  .h-icon-close{
    display: none;
    .text-hover();
  }

  &-searching {
    &.@{search-prefix}-end {
      >.h-icon-search{
        display: none;
      }
    }
    .h-icon-close{
      display: block;
    }
  }
  &.@{search-prefix}-front {
    >.h-icon-search{
      z-index: 1;
      left: 8px;
      right: auto;
    }
    input{
      padding-left: 30px;
    }
  }
  &.@{search-prefix}-end {
    >.h-icon-search{
      .text-hover();
    }
  }
}