.form-control {
  background-color: @form-control-bg;
  background-image: none;
  border: 1px solid @form-control-border;
  border-radius: @form-control-border-radius;
  display: block;
  font-size: @font-size-lg;
  padding: 4px 12px;
  transition:
    border-color 0.15s ease-in-out 0s,
    box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  color: @form-control-color;
  box-shadow: none;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  cursor: default;
  color: @form-control-disabled-color;
}

.form-control::-moz-placeholder {
  color: @form-control-placeholder-color;
}

.form-control::-webkit-input-placeholder {
  color: @form-control-placeholder-color;
}

:-ms-input-placeholder.form-control {
  color: @form-control-placeholder-color;
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

.input-lg {
  font-size: @font-size-lg;
}

.input-sm {
  font-size: @font-size-sm;
}

textarea {
  resize: none;
}

label {
  font-weight: normal;
  margin-bottom: 0;
}

.form-label {
  .opacity(0.7);
}

.form-information {
  .opacity(0.7);

  float: right;
}

.form-control {
  &:focus {
    border-color: @form-control-focus-border;
    outline: 0;
    box-shadow: none;
  }
}

.form-control-feedback {
  display: none;

  &.ux-icon,
  & ux-icon {
    line-height: 34px;
  }
}

.form-control-validation {
  color: @form-control-validation;
}

.has-error {
  .form-control-validation {
    color: @form-control-invalid-color;
  }
}

.has-error ~ .form-group-validation {
  .form-control-validation {
    color: @form-control-invalid-color;
  }
}

.has-feedback {
  position: relative;

  .form-control-feedback {
    display: block;
  }
}

.has-success,
.has-secondary,
.has-error {
  .form-control:focus {
    box-shadow: none;
  }
}

.has-success {
  .form-control {
    border-color: @form-control-success-color;
  }
}

.has-secondary {
  .form-control {
    border-color: @form-control-focus-border; // not documented / supported
  }
}

.has-error {
  .form-control {
    border-color: @form-control-invalid-border;

    &:focus {
      border-color: @form-control-invalid-border;
    }
  }

  .input-group-addon {
    background-color: @form-control-bg;
    border-color: @form-control-border;
    color: @text-color;
  }
}

.has-success {
  .control-label {
    color: @form-control-success-color;
  }
}

.has-secondary {
  .control-label {
    color: @accent; // not documented / supported
  }
}

.has-error {
  .control-label,
  .help-block,
  .error-text,
  .form-control-feedback {
    color: @form-control-invalid-color;
  }
}

.control-label,
.form-label {
  margin-bottom: 5px;
}

.help-block {
  color: #737373;
}

.input-group-addon {
  background-color: @form-control-bg;
  border: 1px solid @form-control-border;
  border-radius: 1px;
  color: inherit;
  font-size: @font-size;
  font-weight: 400;
  line-height: 1;
  padding: 5px 12px;
  text-align: center;
}

.inner-addon {
  position: relative;
}

/* style icon */

.inner-addon {
  .ux-icon,
  ux-icon {
    position: absolute;
    padding: 10px;
    pointer-events: none;
  }
}

.inner-addon-button {
  position: relative;

  .ux-icon,
  ux-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 16px;
    margin: auto 10px;
    cursor: pointer;
    z-index: @inner-addon-button-z-index;
  }
}

/* align icon */

.left-addon {
  .ux-icon,
  ux-icon {
    left: 0;
  }
}

.right-addon {
  .ux-icon,
  ux-icon {
    right: 0;
  }
}

/* add padding  */

.left-addon input {
  padding-left: 30px;
}

.right-addon input {
  padding-right: 30px;
}

.input-group-btn {
  button {
    height: 34px;

    &.button-secondary {
      border-color: @form-control-border;
    }
  }

  &:first-child > .btn,
  &:first-child > .btn-group {
    margin-right: -2px;
  }
}

// Float label (Angular)
.ux-float-label {
  position: relative;
  margin-left: 12px;
  margin-bottom: 0;
  font-size: @font-size-sm;
  color: lighten(@text-color, 30%);
  z-index: @float-label-z-index;

  &:not(.ux-float-label-raised) {
    opacity: 0;
    transform: translateY(16px);
  }

  &.ux-float-label-raised {
    opacity: 1;
    transition: 0.5s ease-in-out;
  }
}

.ux-float-label ~ input,
.ux-float-input {
  border: none;
  border-bottom: 1px solid @float-label-border;
}