/* default: success, green circle */
.status {
  width: var(--font-size-small);
  height: var(--font-size-small);
  border-radius: 50%;
  display: inline-block;
  background: var(--brand-alert-green);
}

/* yellow triangle */
.warning {
  border-radius: 0;
  background: none;
  width: 0;
  height: 0;
  border-left: calc(var(--font-size-small) / 1.7) solid transparent;
  border-right: calc(var(--font-size-small) / 1.7) solid transparent;
  border-bottom: var(--font-size-small) solid var(--brand-alert-yellow);
}

/* red square */
.error {
  border-radius: 0;
  background: var(--brand-alert-red);
  text-transform: capitalize;
}
