:is(.alert-primary, .alert-secondary, .alert-success, .alert-warning, .alert-danger) {
  --bg: var(--cinza);
  --cl: var(--preto-light);
  --bd: var(--preto);

  position: relative;
  display: block;
  padding: 1.5rem 1rem;

  border: none;
  border-left: solid 2px var(--bd);
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  border-radius: var(--radius-2);
}
.alert__icon {
  position: absolute;
  top: -0.5rem;
  left: -1rem;
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;

  border: solid 2px var(--bd);
  background-color: #fff;
  border-radius: 50%;

  font-size: 1rem;
  color: var(--cl);
}

.alert-primary {
  --bg: color-mix(in srgb, var(--primary) 15%, transparent);
  --cl: var(--primary);
  --bd: var(--primary);
}
.alert-secondary {
  --bg: var(--cinza);
  --cl: var(--preto-light);
  --bd: var(--preto);
}
.alert-success {
  --bg: color-mix(in srgb, var(--success) 15%, transparent);
  --cl: var(--success);
  --bd: var(--success);
}
.alert-warning {
  --bg: color-mix(in srgb, var(--warning) 15%, transparent);
  --cl: var(--warning);
  --bd: var(--warning);
}
.alert-danger {
  --bg: color-mix(in srgb, var(--danger) 15%, transparent);
  --cl: var(--danger);
  --bd: var(--danger);
}