@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../button/style/mixin';
@import './mixin';

@search-prefix: ~'@{mk-prefix}-input-search';

.searchInputIcon(@input-height, @font-size) {
  .@{search-prefix}-icon {
    @horizontal-padding: (@input-height - @font-size) / 2;
    padding: 0 @horizontal-padding;

    &::before {
      transform: translateX(-@horizontal-padding - @border-width-base);
    }

    &::after {
      width: @input-height;
    }
  }
}

.searchInputIcon(@input-height-base, @font-size-base);

.@{mk-prefix}-input-affix-wrapper-lg {
  .searchInputIcon(@input-height-lg, @font-size-lg);
}
.@{mk-prefix}-input-affix-wrapper-sm {
  .searchInputIcon(@input-height-sm, @font-size-sm);
}

.@{search-prefix} {
  // custom
  border: 0;
  background-color: @search-background-color;
  border-color: @search-background-color;
  border-radius: @border-radius-base;
  &:hover,
  &:focus {
    border-color: @search-background-color !important;
  }
  &-icon {
    margin-left: 0.5em;
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: @input-icon-hover-color;
    }
  }

  &:not(&-enter-button) {
    padding-right: 0;
  }

  &-enter-button {
    input {
      border-right: 0;

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

    &.@{mk-prefix}-input-affix-wrapper {
      border-right: 0;
    }

    & + .@{mk-prefix}-input-group-addon,
    input + .@{mk-prefix}-input-group-addon {
      padding: 0;
      border: 0;

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

  // custom
  &:not(&-sr) {
    input {
      background-color: @search-background-color;
      border-color: @search-background-color;
      border-radius: @border-radius-base;
      &:hover,
      &:focus {
        border-color: @search-background-color !important;
      }
    }
  }
  // custom
  .mk-input {
    border-color: @search-background-color !important;
  }
}
