.form-errors-component {
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-md);
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  box-shadow: var(--shadow-1);
}

/* Focus lands here programmatically after a failed submit, and the box is loud
   enough on its own that the browser outline only adds noise. */
.form-errors-component:focus {
  outline: none;
}

.form-errors-component .form-errors-title {
  margin: 0;
  font-weight: 700;
}

.form-errors-component .form-errors-title i {
  margin-right: 8px;
  color: var(--color-error);
}

.form-errors-component .form-errors-list {
  margin: 4px 0 0 0;
  padding-left: 28px;
}

/* A single error needs no bullet to be told apart from the others. */
.form-errors-component .form-errors-list li:only-child {
  list-style: none;
  margin-left: -28px;
}