// Mixins
@mixin form-message {
  font-size: $vl-form-font-size;
  font-weight: 400;
  color: $vl-alt-text-color;

  @include respond-to(small) {
    font-size: $vl-base-mobile-font-size;
  }
}

// Form label
.vl-form__label {
  @include form-message;
  line-height: 1;
  font-weight: 500;

  &--block {
    display: block;
  }

  &--offset {
    margin-top: $vl-spacing-xsmall;
  }

  &--light {
    color: $vl-label-color-light;
  }

  &__message {
    font-weight: normal;
    color: $vl-form-label-message-color;
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

// Form error
// Form success
.vl-form__error,
.vl-form__success {
  @include form-message;
  font-size: 1.4rem;
  color: $vl-error-color;

  &--block {
    display: block;
  }

  .vl-vi {
    margin-left: .5rem;
    font-size: .8rem;
  }
}

.vl-form__error {
  color: $vl-error-color;
}

.vl-form__success {
  color: $vl-success-color;
}

// Form annotation
.vl-form__annotation {
  @include form-message;
  font-size: 1.4rem;
  line-height: 1.25;

  @include respond-to(small) {
    font-size: 1.3rem;
  }

  &--block {
    display: block;
  }
}