/**
 * Messages that JavaScript adds after page load never pass through
 * status-messages.html.twig: core builds them in the browser with its own
 * '.messages' markup, which stable9 leaves unstyled. This library extends
 * core/drupal.message, so it only ships with the message API.
 */
/* The fallback wrapper in page.html.twig carries the 'hidden' attribute, and
   core only strips a 'hidden' class from it - unhide it once JavaScript has
   claimed the wrapper for its messages. */
[data-drupal-messages][hidden] {
  display: block;
}

.messages {
  --message-color: var(--status-info);
  margin-block: 1rem;
  padding: 0.75rem 1rem;
  --background-color: color-mix(in srgb, var(--message-color) 12%, var(--paper));
  background-color: var(--background-color);
  color: contrast-color(var(--background-color));
  font: var(--small);
  max-width: var(--content-width);
  box-sizing: border-box;
  margin-inline: auto;
  a {
    color: inherit;
  }
}

.messages--status {
  --message-color: var(--status-success);
}

.messages--warning {
  --message-color: var(--status-warning);
}

.messages--error {
  --message-color: var(--status-error);
}