@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "../../button/style/mixin";
@import "./mixin";

.@{ant-prefix}-input-search-wrapper {
  position: relative;

  .@{ant-prefix}-input-search {
    transition: all .3s ease;
    &-icon {
      position: absolute;
      right: 8px;
      cursor: pointer;
      transition: all .3s ease;
      font-size: 14px;
      height: 20px;
      line-height: 20px;
      top: 50%;
      margin-top: -10px;
      &:hover {
        color: @input-hover-border-color;
      }
    }
  }

  &:hover .@{ant-prefix}-input-search:not([disabled]) {
    border: 1px solid @input-hover-border-color;
  }
}

// code blow is keeped for compatibility
// for this demo: http://1x.ant.design/components/select/#components-select-demo-search-box
// do not delete until 3.x
.@{ant-prefix}-search-input-wrapper {
  display: inline-block;
  vertical-align: middle;
}

.@{ant-prefix}-search-input {
  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child,
  &.@{ant-prefix}-input-group .@{ant-prefix}-select:first-child {
    border-radius: @border-radius-base;
    position: absolute;
    top: -1px;
    width: 100%;
  }

  &.@{ant-prefix}-input-group .@{ant-prefix}-input:first-child {
    padding-right: 36px;
  }

  .@{ant-prefix}-search-btn {
    .btn-default;
    border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
    left: -1px;
    position: relative;
    border-width: 0 0 0 1px;
    z-index: 2;
    padding-left: 8px;
    padding-right: 8px;
    &:hover {
      border-color: @border-color-base;
    }
  }
  &&-focus .@{ant-prefix}-search-btn-noempty,
  &:hover .@{ant-prefix}-search-btn-noempty {
    .btn-primary;
  }
  .@{ant-prefix}-select-combobox {
    .@{ant-prefix}-select-selection__rendered {
      margin-right: 29px;
    }
  }
}