#errorExplanation {
  background: #ffdfdf;
  padding: var(--spacing-2);
  text-align: left;
  margin-bottom: var(--spacing-2);
  border: 1px solid #d08f91;
  color: #690001;
  border-radius: var(--border-radius_medium);

  h2 {
    font-size: 1.2em;
  }

  ul {
    padding: 0 0 0 var(--spacing-4);
  }
}

div#errors,
div.errors {
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-1) var(--spacing-7);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--border-radius_medium);
  border-color: var(--notice-error-border-color);
  color: var(--notice-error-text-color);
  background-color: var(--notice-error-background-color);
  display: none;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: decimal;
  }

  ul li {
    margin-bottom: 0.5em;
  }
}

body.error {
  .error.message {
    max-height: 100%;
    overflow-y: scroll;
  }

  alchemy-message[type="error"] {
    margin: 0;
  }
}

.turbo-frame-error {
  display: block;
  padding: var(--spacing-2);
  background-color: var(--color-yellow_medium);
  border: 1px solid var(--color-yellow_dark);
  border-radius: var(--border-radius_medium);
  margin: var(--spacing-2);
  color: var(--color-yellow_dark);

  &:before {
    content: "⚠️";
    padding: var(--spacing-2);
  }
}
