%notice {
  border-radius: var(--decor-radius-100);
  border: var(--decor-border-100);
  color: var(--token-color-hashicorp-brand);
}
%notice::before {
  @extend %as-pseudo;
}
%notice header > * {
  @extend %h300;
}
%notice footer * {
  @extend %p3;
  font-weight: var(--typo-weight-bold);
}
%notice-success,
%notice-info,
%notice-highlight,
%notice-error,
%notice-warning {
  @extend %notice;
}
%notice-success {
  background-color: var(--token-color-surface-success);
  border-color: var(--token-color-foreground-success);
}
%notice-success header * {
  color: var(--token-color-palette-green-400);
}
%notice-info {
  border-color: var(--token-color-border-action);
  background-color: var(--token-color-surface-action);
}
%notice-info header * {
  color: var(--token-color-foreground-action-active);
}
%notice-highlight {
  background-color: var(--token-color-surface-strong);
  border-color: var(--token-color-palette-neutral-300);
}
%notice-info header * {
  color: var(--token-color-foreground-action-active);
}
%notice-warning {
  border-color: var(--token-color-vault-border);
  background-color: var(--token-color-vault-gradient-faint-start);
}
%notice-warning header * {
  color: var(--token-color-vault-foreground);
}
%notice-error {
  background-color: var(--token-color-surface-critical);
  border-color: var(--token-color-foreground-critical);
}
%notice-error header * {
  color: var(--token-color-foreground-critical);
}
%notice-success::before {
  @extend %with-check-circle-fill-mask;
  color: var(--token-color-foreground-success);
}
%notice-info::before {
  @extend %with-info-circle-fill-mask;
  color: var(--token-color-foreground-action);
}
%notice-highlight::before {
  @extend %with-star-fill-mask;
  color: var(--token-color-vault-brand);
}
%notice-warning::before {
  @extend %with-alert-triangle-mask;
  color: var(--token-color-foreground-warning);
}
%notice-error::before {
  @extend %with-cancel-square-fill-mask;
  color: var(--token-color-foreground-critical);
}