@import '../theme/ant.less';
@import './_placeholder.less';

.input-lg() {
  height: @input-height-lg;
  padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
  font-size: @font-size-lg;
}

.input-sm() {
  height: @input-height-sm;
  padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
}

.active() {
  border-color: @primary-color;
  border-right-width: @border-width-base !important;
  outline: 0;
}

.hover(@color: @input-hover-border-color) {
  border-color: @color;
  border-right-width: @border-width-base !important;
}

.disabled() {
  color: @disabled-color;
  background-color: @input-disabled-bg;
  cursor: not-allowed;
  opacity: 1;

  &:hover {
    .hover(@input-border-color);
  }
}

.input() {
  position: relative;
  display: inline-block;
  width: 100%;
  height: @input-height-base;
  padding: @input-padding-vertical-base @input-padding-horizontal-base;
  color: @input-color;
  font-size: @font-size-base;
  line-height: @line-height-base;
  background-color: @input-bg;
  background-image: none;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  transition: all 0.3s;
  .placeholder();

  &:hover {
    .hover();
  }

  &:focus {
    .active();
  }

  &-disabled {
    .disabled();
  }

  &[disabled] {
    .disabled();
  }

  textarea& {
    max-width: 100%;
    height: auto;
    min-height: @input-height-base;
    line-height: @line-height-base;
    vertical-align: bottom;
    transition: all 0.3s, height 0s;
  }

  &-lg {
    .input-lg();
  }

  &-sm {
    .input-sm();
  }
}