// #############################################################################
// WFieldErrorIndicator
// WFieldWarningIndicator
// Client side validation error messages if plugin included
// #############################################################################

.wc-fieldindicator {
  display: block;
  margin-top: $wc-gap-small;

  > .fa {
    text-align: left;
    vertical-align: top;
    width: $wc-icon-size;

    + span {
      display: inline-block;
    }
  }

  > span {
    display: block;
    white-space: normal;
    width: calc(100% - #{$wc-icon-size});

    + span {
      margin-left: $wc-icon-size;
      margin-top: $wc-gap-small;
    }
  }

  @each $i in success, info, warn, error {
    $wc-clr-to-use: -1;
    @if $i == success {
      $wc-clr-to-use: $wc-clr-message-icon-success;
    } @else if $i == info {
      $wc-clr-to-use: $wc-clr-message-icon-info;
    } @else if $i == warn {
      $wc-clr-to-use: $wc-clr-message-icon-warn;
    } @else if $i == error {
      $wc-clr-to-use: $wc-clr-message-icon-error;
    }

    @if $wc-clr-to-use != -1 {
      &.wc-fieldindicator-type-#{$i} {
        .fa {
          color: $wc-clr-to-use;
        }
      }
    }
  }
}
