/**
 * Form.
 *
 * Overrides for Bootstrap's from and control styles.
 */

/** Label */

.control-label {
  color: var(--color-label);
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: 100%;
  font-weight: 700;
  line-height: inherit;
  margin: 0;
  padding: 0 0 .25em;
  text-align: inherit;
}

/** Form control */

.form-control {
  background: var(--color-input-background);
  border-color: var(--color-input-border);
  border-radius: var(--border-radius);
  border-width: thin;
  box-shadow: none;
  color: var(--color-input-color);
  font-size: 114.29%; /* 16px */
  height: auto;
  line-height: inherit;
  padding: var(--padding);
  transition: box-shadow var(--transition-duration);

  &:focus,
  &:hover {
    background: var(--color-input-background);
    border-color: var(--color-input-border);
    color: var(--color-input-color);
  }
  &:focus {
    box-shadow: 0 0 0 .25em var(--color-active);
    outline: none;
  }
}
.form-control[disabled] {
  background: var(--color-input-background);
}

/** Help block */

.help-block {
  background: var(--color-button-primary-background);
  border-radius: 2px;
  color: var(--color-notification-color);
  display: inline-block;
  font-size: 87.5%; /* 12px */
  margin: 4px 0 0;
  padding: .4em .7em;
}

/** Feedback states */

.has-error .help-block {
  background-color: var(--color-error);
  color: var(--color-notification-color);
}
.has-success .help-block {
  background-color: var(--color-success);
  color: var(--color-notification-color);
}
.has-feedback {
  & .control-label {
    color: inherit;
  }
  & .form-control,
  &.has-error .form-control,
  &.has-success .form-control {
    border-color: var(--color-input-border);
  }
  &.has-error .form-control:focus,
  &.has-success .form-control:focus {
    box-shadow: 0 0 0 .25em var(--color-active);
  }
  & .form-control {
    padding-right: 1em;
  }
  /** TODO: Add icons to form-control-feedback components */
  & .form-control-feedback {
    display: none;
  }
}