%inline-alert {
  font-style: normal;
  font-weight: normal;
}
%inline-alert-success,
%inline-alert-info,
%inline-alert-error,
%inline-alert-warning {
  @extend %inline-alert;
}
%inline-alert {
  color: inherit;
}
%inline-alert-error {
  color: $color-failure;
}
%inline-alert::before {
  font-size: 14px;
}
%inline-alert-success::before {
  @extend %with-check-circle-fill-color-icon;
  @extend %as-pseudo;
}
%inline-alert-error::before {
  @extend %with-cancel-square-fill-color-icon;
  @extend %as-pseudo;
}
%inline-alert-warning::before {
  @extend %with-alert-triangle-color-icon;
  @extend %as-pseudo;
  /* the warning triangle always looks */
  /* too low just because its a triangle */
  /* this tweak make it look better */
  margin-top: -9px;
}
%inline-alert-info::before {
  @extend %with-info-circle-fill-color-icon;
  @extend %as-pseudo;
}