.alert-box {
  padding: var(--spacing-xl);
  border-radius: var(--spacing-md);
  display: flex;
  gap: var(--spacing-xl);
  font-size: var(--font-size-md);
  line-height: 1.55;
}

.alert-box__icon {
  width: 20px;
  height: 20px;
}

/* голубой - информирующий */
.alert-box--info {
  background-color: var(--blue-blue-1);
}

.alert-box--info .alert-box__icon {
  color: var(--blue-blue-6);
}

/* оранжевый - предупреждающий */
.alert-box--warning {
  background-color: var(--orange-orange-1);
}

.alert-box--warning .alert-box__icon {
  color: var(--orange-orange-7);
}

/* красный - связан с ошибкой */
.alert-box--error {
  background-color: var(--red-red-1);
}

.alert-box--error .alert-box__icon {
  color: var(--red-red-6);
}

/* на всякий случай зеленый для успеха */
.alert-box--success {
  background-color: var(--green-green-1);
}

.alert-box--success .alert-box__icon {
  color: var(--green-green-6);
}