@layer components {
  .error-explanation {
    background-color: color-mix(in oklch, var(--color-error) 12%, transparent);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-lg);
    color: var(--color-error-text);
    padding: 0.75em 1em;
  }

  .error-explanation__list {
    margin: 0;
    padding-inline-start: 1.25em;
  }

  .error-explanation__message {
    margin-block: 0.25rem;
  }
}