@import '../tokens/tokens';

.alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid;
  border-radius: $r-md;
  font-size: 12.5px;
  margin-bottom: 18px;
}

.warn {
  background: $gold-50;
  color: $amber-700;
  border-color: $gold-300;
}

.ok {
  background: $green-50;
  color: $green-600;
  border-color: #bbf7d0;
}

.err {
  background: $red-50;
  color: $red-500;
  border-color: #fecaca;
}

.info {
  background: $navy-50;
  color: $navy-800;
  border-color: $navy-100;
}