@import './var';
input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;
}

// 外层包裹的from
.#{$prefix}form--search{
  min-width: 100px;
}

.#{$prefix}form--search.size-s{
  width:$search-width-size-s;
}
.#{$prefix}form--search.size-m{
  width:$search-width-size-m;
}
.#{$prefix}form--search.size-l{
  width:$search-width-size-l;
}
.#{$prefix}form--search.size-full-width{
  width:100%;
}

.#{$prefix}search {
  position: relative;
  height: $search-height;
  box-sizing: border-box;
  &__inner {
    position: relative;
    height: 100%;
    cursor:text;
  }
  &--multi {
    & .#{$prefix}input--search {
      // line-height: 1.5;
      // padding-top:10px;
      &:focus {
        height: $search-multi-height-focus;
        z-index: 3;
        overflow-y: auto;
      }
    }
  }
  &--simple {
    & .#{$prefix}input--search {
      border-top: transparent;
      border-right: transparent;
      border-left: transparent;
      border-radius: 0;
      padding-left:10px;
    }
  }
  .#{$prefix}btn {
    position: absolute;
    z-index: 4; //发现用处了，在搜索框里，不过可以优化掉
    padding: ($search-height - 18px)/2 ($search-height - 16px)/2;
    bottom: 1px;
    height: ($search-height - 2px);
    &--search {
      right: 1px;
    }
    &--dismiss {
      right: 31px;
    }
    &--info {
      right: 31px;
    }
  }

  &__tags {
    display: inline-block;
  }
  &__tips {
    display: inline-block;    
    line-height: 21px;  //修复标签搜索，placeholder换行时，行高会溢出的bug
    font-size: $search-font-size-default;
    //margin-top: 4px;
    margin-top: ($search-height - 21)/2;
  }

  &.is-disabled{
    cursor:not-allowed;
    background-color:$color-bg-disabled;
    .#{$prefix}search__inner{
      cursor: inherit;
    }
    .#{$prefix}input{
      @include form-control-disabled();
    }
  }
}

.#{$prefix}search--icon-front{

  & .#{$prefix}input--search{
    padding-left:30px;
    padding-right:30px;
  }
  & .#{$prefix}btn--dismiss{
    right:0;
  }
  & .#{$prefix}btn--search{
    left:0;
    &:hover{
      background-color: transparent;
      cursor: default;
    }
  }
}

.#{$prefix}search--has-info{
  .#{$prefix}btn--dismiss{
    right:61px;
  }
  .#{$prefix}input--search{
    padding-right: $search-height * 3;
  }
}