.input() {
  width: 100%;
  position: relative;
  display: inline-block;
  padding: @input-padding-md-vertical @input-padding-md-horizontal;
  border-radius: @border-radius-base;
  color: @input-color;
  font-size: @font-size-md;
  line-height: @line-height-md;
  font-weight: @font-weight-regular;
  background-color: @input-bg;
  border-width: 1px;
  border-style: solid;
  border-color: @input-border;
  outline: none;
  box-sizing: border-box;
  .placeholder();

  &:hover {
    .input-hover();
  }
  &:active,
  &.active {
    .input-active();
  }

  &:focus {
    .input-focus();
  }
  &[readonly] {
    cursor: pointer;
  }
  &[disabled],
  &-disabled {
    .input-disabled();
    .placeholder(@input-placeholder-disabled-color);
  }

  &-filled {
    background-color: @input-filled-bg;
    border-color: @input-filled-border;
    &:hover:not([disabled]) {
      .input-hover(@input-filled-hover-border; @input-filled-hover-bg;);
    }

    &:active:not([disabled]),
    &.active {
      .input-active(@input-filled-active-border; @input-filled-active-bg;);
    }

    &:focus:not([disabled]) {
      .input-focus(@input-filled-focus-border; @input-filled-focus-bg;);
    }
    &[disabled],
    &-disabled {
      .input-disabled(@input-filled-disabled-border; @input-filled-disabled-bg;);
    }
  }
}
.input-hover(@border: @input-hover-border; @bg-color: @input-hover-bg;) {
  border-color: @border;
  z-index: @input-hover-zindex;
  background-color: @bg-color;
}
.input-active(@border: @input-active-border; @bg-color: @input-active-bg;) {
  border-color: @border;
  z-index: @input-active-zindex;
  background-color: @bg-color;
}
.input-focus(@border: @input-focus-border; @bg-color: @input-focus-bg;){
  border-color: @border;
  box-shadow: @input-active-box-shadow;
  z-index: @input-focus-zindex;
  background-color: @bg-color;
}
.input-disabled(@border: @input-disabled-border; @bg-color: @input-disabled-bg;) {
  border-color: @border;
  color: @input-disabled-color;
  cursor: not-allowed;
  opacity: 1;
  background-color: @bg-color;
  &:hover,
  &:focus {
    border-color: @border;
    box-shadow: none;
  }
}
.input-danger(@bg-color: @input-bg; @border: @input-danger-border;) {
  border-color: @border;
  z-index: @input-danger-zindex;
  background-color: @bg-color;
}
.input-danger-hover(@bg-color: @input-bg; @border: @input-danger-border;) {
  border-color: @border;
  background-color: @bg-color;
}
.input-danger-active(@bg-color: @input-bg; @border: @input-danger-border;) {
  border-color: @border;
  box-shadow: @input-danger-box-shadow;
  background-color: @bg-color;
}
.input-xs() {
  font-size: @font-size-sm;
  line-height: @line-height-sm;
  padding: @input-padding-xs-vertical @input-padding-xs-horizontal;
}
.input-sm() {
  font-size: @font-size-sm;
  line-height: @line-height-sm;
  padding: @input-padding-sm-vertical @input-padding-sm-horizontal;
}
.input-lg() {
  font-size: @font-size-md;
  line-height: @line-height-md;
  padding: @input-padding-lg-vertical @input-padding-lg-horizontal;
}
.input-xl() {
  font-size: @font-size-md;
  line-height: @line-height-md;
  padding: @input-padding-xl-vertical @input-padding-xl-horizontal;
}