.alert {
  display: flex;
  flex-flow: row;
  align-items: center;
  padding: 16px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid var(--color);
  color: var(--color);
  background-color: var(--bg-color);
}
.alert--info {
  --color: var(--info-invert);
  --bg-color: var(--info);
}
.alert--success {
  --color: var(--success-invert);
  --bg-color: var(--success);
}
.alert--warning {
  --color: var(--warning-invert);
  --bg-color: var(--warning);
}
.alert--error {
  --color: var(--danger-invert);
  --bg-color: var(--danger);
}
.alert .o-icon {
  margin-right: 16px;
}