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

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

@search-btn-bg: @white;

.@{search-prefix} {
  .@{ant-prefix}-input {
    border-color: transparent;

    &:hover,
    &:active,
    &:focus {
      border-color: transparent;
    }
  }

  .@{ant-prefix}-input-disabled {
    border: none;

    + .@{ant-prefix}-input-group-addon {
      background-color: transparent;

      .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
        background-color: @input-disabled-bg;
      }
    }
  }

  .@{ant-prefix}-input-wrapper {
    box-sizing: border-box;
    border-radius: @border-radius-base;
    border: @border-width-base @border-style-base @input-border-color;
    transition: all 0.3s;

    .@{ant-prefix}-input-affix-wrapper {
      border: none;
    }

    .@{ant-prefix}-group-addon {
      background: @component-background;
    }

    &:hover {
      border-color: @input-hover-border-color;
    }

    .@{search-prefix}-button {
      border: none;
      background-color: @search-btn-bg;
      height: @height-base - 2px;
    }
  }

  .@{ant-prefix}-input-affix-wrapper {
    border-radius: 0;
    border-color: transparent;
    padding-right: 0;

    &:hover {
      border-color: transparent;
    }
  }

  // fix slight height diff in Firefox:
  // https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
  .@{ant-prefix}-input-lg {
    line-height: @line-height-base - 0.0002;
  }

  > .@{ant-prefix}-input-group {
    > .@{ant-prefix}-input-group-addon:last-child {
      left: 0;
      padding: 0;
      border: 0;

      .@{search-prefix}-button {
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }

      .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
        color: @text-color-secondary;

        &.@{ant-prefix}-btn-loading::before {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }
    }
  }

  &-button {
    height: @input-height-base;

    &:hover,
    &:focus {
      z-index: 1;
    }
  }

  &.@{search-prefix}-small
    .@{ant-prefix}-input-wrapper
    .@{search-prefix}-button {
    height: @input-height-sm - 2px;
  }

  &.@{search-prefix}-large
    .@{ant-prefix}-input-wrapper
    .@{search-prefix}-button {
    height: @input-height-lg - 2px;
  }
}