.form-group {
  margin-bottom: 1.75rem;
  &.disabled {
    > label {
      opacity: .5;
    }
    .form-control {
      color: $gray-400;
    }
  }
  label {
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    font-weight: $font-weight-normal;
    color: $black;
    line-height: 1;
    .dark & {
      color: $gray-100;
    }
  }
  .info-text {
    width: 100%;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    font-weight: $font-weight-normal;
    color: $secondary;
    line-height: 1;
  }
  .valid-feedback {
    width: 100%;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    font-weight: $font-weight-normal;
    color: $success;
    line-height: 1;
  }
  .invalid-feedback {
    width: 100%;
    margin-top: 0.625rem;
    font-size: 0.875rem;
    font-weight: $font-weight-normal;
    color: $danger;
    line-height: 1;
  }
}

.form-control {
  width: 100%;
  height: calc(2em + 1.25rem);
  padding: 0.625rem 1.25rem;
  line-height: 2;
  font-size: 1rem;
  font-weight: $font-weight-light;
  background-color: $gray-200;
  border-color: $gray-200;
  color: $black;
  display: inline-block;
  .dark & {
    background-color: $gray-900;
    border-color: $gray-900;
    color: white;
    &:focus {
      color: $white;
      background-color: $gray-900;
      border-color: $gray-900;
    }
  }
  &:focus {
    color: $black;
    background-color: $gray-200;
    border-color: $gray-200;
    outline: 0;
    box-shadow: none!important;
  }
  &.is-valid {
    border: 0;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300b06a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }
  &.is-invalid {
    border: 0;
    border-bottom: 2px solid $accent;
  }
  &.textarea {
    line-height: 1.5;
  }
}

.form-control::-moz-placeholder {
  color: $gray-400;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: $gray-400;
}
.form-control::-webkit-input-placeholder {
  color: $gray-400;
}