#{ns(message)} {
  --comma: ", ";
  --content: var(--comma);
  @include display-flex(row, flex-start);
  @include text-style(xs);
  @include margin(0 0 1v 0);

  @include after(var(--content)) {
    @include sr-only();
  }

  &:last-child {
    --comma: ". ";
    @include margin-bottom(0);
  }

  &--error,
  &--valid,
  &--warning,
  &--info {
    @include icon(null, sm, before) {
      display: inline-block;
      @include margin-right(1v);
      @include margin-top(0.5v);
    }

    @include icon-forced-color(canvasText, true);
  }

  &--error {
    @include icon-image(error-fill, before);
  }

  &--valid {
    @include icon-image(success-fill, before);
  }

  &--info {
    @include icon-image(info-fill, before);
  }

  &--warning {
    @include icon-image(warning-fill, before);
  }
}