// @page Pattern Library/Forms
// @name Validation messages
//
// @description
//   Used to provide more detailed feedback about the data users have entered into forms.
//
//   #### Best practices
//   * For inputs that have a label above them, place the validation message between the input and the label.
//   * Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.
//
// @state .us-validation--error - Error styling for incorrect data on forms
// @state .us-validation--success - Success styling for correct forms
//
// @markup
//   <div class="us-field">
//     <label>Email</label>
//
//     <div class="us-validation {$modifiers}">
//       <div class="us-validation__icon"></div>
//       <div class="us-validation__message">Validation message here</div>
//     </div>
//
//     <input type="email" class="us-form-input" name="email" />
//   </div>

$message-padding-vertical: .35em !default;
$message-padding-horizontal: .5em !default;
$message-min-height: 2.4em !default;

$icon-size: 18px !default;
$icon-bg-size: 26px !default;
$icon-text-color: #fff !default;

$error-color: $c-red !default;
$error-icon: "!" !default;

$success-color: $c-green !default;
$success-icon: "\2713" !default;

@mixin validation-style($color, $icon) {
  .us-validation__message {
    color: $color;
    border-color: $color;

    &:before,
    &:after {
      border-color: $color;
    }

    &:after {
      border-right-color: #fff;
    }
  }

  .us-validation__icon {
    background-color: $color;

    &:before {
      content: $icon;
    }
  }
}

%validation-icon {
  @include heading-font;
  position: absolute;
  color: $icon-text-color;
  text-align: center;
  border-radius: 50%;
}

.us-validation {
  position: relative;
  display: block;
  padding: .25em 0 .25em ($icon-bg-size + 5);
}

.us-validation,
.us-validation--error {
  @include validation-style($error-color, $error-icon);
}

.us-validation--success {
  @include validation-style($success-color, $success-icon);
}

.us-validation__message {
  position: relative;
  display: block;
  min-height: $message-min-height;
  padding: $message-padding-vertical $message-padding-horizontal;
  margin: 0;
  line-height: 1.5;
}

.us-validation__icon {
  @extend %validation-icon;
  top: 10px;
  left: 0;
  width: $icon-bg-size;
  height: $icon-bg-size;
  font-size: $icon-size;
  line-height: $icon-bg-size;
}