%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: var(--token-color-foreground-critical);
}
%inline-alert::before {
  font-size: 14px;
}
%inline-alert::before {
  @extend %as-pseudo;
}
%inline-alert-success::before {
  @extend %with-check-circle-fill-mask;
  color: var(--token-color-foreground-success);
}
%inline-alert-error::before {
  @extend %with-cancel-square-fill-mask;
  color: var(--token-color-foreground-critical);
}
%inline-alert-warning::before {
  @extend %with-alert-triangle-mask;
  color: var(--token-color-foreground-warning);
  /* 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-mask;
  color: var(--token-color-foreground-action);
}