@mixin form-feedback ($background-img-url, $border-color) {
  background: url($background-img-url) no-repeat;
  background-position: 98%;
  background-size: rem(18);
  border: rem(1) solid $border-color;
  padding-right: $padding_forms--errors;

  &:hover,
  &:focus {
    // We redefine the color here to avoid getting the default focus color
    border-color: $border-color;
  }
}

.elzar-messages_feedback {

  .elzar-form-list & {
    margin-top: rem(-2);
  }
}

.elzar-form-list_element {
  border-radius: none;
  margin-bottom: rem(16);
  //remove white space between input field and error box.
  margin-top: rem(-2);
  min-width: $min-component-width;
}

.elzar-form-error {
  @include form-feedback(
    'svg/symbol-close.svg',
    $error-color
  );
}

.elzar-form-success {
  @include form-feedback(
    'svg/symbol-check.svg',
    $success-color
  );
}

.elzar-form-warning {
  @include form-feedback(
    'svg/symbol-warning.svg',
    $warning-color
  );
}