.hover(@color: @input-hover-border-color) {
  border-color: tint(@color, 20%);
}
.active(@color: @input-hover-border-color) {
  border-color: tint(@color, 20%);
  outline: 0;
  box-shadow: 0 0 0 2px fade(@color, 20%);
}
.active-error() {
  border-color: @error-color;
  outline: 0;
  box-shadow: 0 0 0 2px fade(@error-color, 20%);
}
.disabled() {
  background-color: @input-disabled-bg;
  opacity: 1;
  cursor: @cursor-disabled;
  color: #ccc;
  &:hover {
      .hover(@input-border-color);
  }
}
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
      color: @color;
      opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
      color: @color;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
      color: @color;
  }
}

// for select and input like component's arrow
.inner-arrow() {
  position: absolute;
  top: 50%;
  right: 8px;
  line-height: 1;
  transform: translateY(-50%);
  font-size: @font-size-base;
  color: @subsidiary-color;
  transition: all @transition-time @ease-in-out;
}