.input-container {
  width: 100%;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="tel"],
textarea,
.input {
  padding: $spacer-small;
  margin-top: $spacer-tiny;
  margin-bottom: $spacer-small;
  border: 1px solid $color-gray-3;
  border-radius: 4px;
  // min-width: 250px;
}
select {
  padding: $spacer-small $spacer-medium-plus $spacer-small $spacer-small;
  margin: $spacer-tiny 0 $spacer-small 0;
  border: 1px solid $color-gray-3;
  border-radius: 4px;
}
.form-group {
  margin-top: $spacer-tiny;
  margin-bottom: $spacer-small;
  width: 100%;
  .label-text {
    font-weight: 600;
  }
}

// Form validation errors with vuelidate
.error.informative {
  display: block;
  color: $color-gamma;
  &:before {
    display: none;
  }
}

span.information {
  display: inline-block;
  font-size: 1.3rem;
  line-height: 1.4rem;
}
.error {
  display: none;
  color: $color-alternate-4;
  font-size: 1.3rem;
  line-height: 1.4rem;
  // Icone assignée dans typography.scss
  &::before {
    line-height: 1.4rem;
    display: block;
  }
}
.form-group--error {
  .error {
    display: block;
  }
  input.error,
  .input.error, textarea.error,
  select.error {
    border-color: $color-alternate-4;
  }
}

.errorMessage {
  color: $color-alternate-4;
  padding-left: $spacer-small;
  border-left: 5px solid $color-alternate-4;
}

.input-container {
  .feedback-button {
    display: none;
  }
  .submit-button {
    display: block;
  }
  &.input-submitted {
    .feedback-button {
      display: block;
    }
    .submit-button {
      display: none;
    }
  }
}