/**
 * @file
 * Styles for system messages.
 */

.messages {
  padding: 15px 20px 15px 35px; /* LTR */
  word-wrap: break-word;
  border: 1px solid;
  border-width: 1px 1px 1px 0; /* LTR */
  border-radius: 2px;
  background: no-repeat 10px 17px; /* LTR */
  overflow-wrap: break-word;
}
[dir="rtl"] .messages {
  padding-right: 35px;
  padding-left: 20px;
  text-align: right;
  border-width: 1px 0 1px 1px;
  background-position: right 10px top 17px;
}
.messages + .messages {
  margin-top: 1.538em;
}
.messages__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.messages__item + .messages__item {
  margin-top: 0.769em;
}
/*
 * The three status skins come from the theme's tokens rather than the flat
 * hexes this file was copied from core with, so a message follows the
 * reader's colour scheme. This file loads globally, and a visitor meets it
 * on the feedback dialog and the contact webform - under
 * [data-theme="dark"] the copied values drew a pale card with near-black
 * text in the middle of a dark page.
 *
 * Each skin uses the same four roles, and the palette already defines all
 * four in both modes:
 *   text    -> --color-fg-{status}-strong  (warning has no -strong: fg)
 *   surface -> --color-{status}-soft
 *   border  -> --color-{status}-subtle
 *   the 8px leading bar the box-shadow draws -> --color-{status}
 * So the bar stays the most saturated of the four in either mode, which is
 * what makes the message readable at a glance from the page margin.
 *
 * The leading icons keep their own baked-in fills (#73b355, #e29700,
 * #e32700). They are saturated enough to hold up on both the light and the
 * dark surface, and turning them into masks that take currentColor is a
 * change to the icon system rather than to this file.
 */
.messages--status {
  color: var(--color-fg-success-strong);
  border-color: var(--color-success-subtle) var(--color-success-subtle) var(--color-success-subtle) transparent; /* LTR */
  background-color: var(--color-success-soft);
  background-image: url(../../images/icons/check.svg);
  box-shadow: -8px 0 0 var(--color-success); /* LTR */
}
[dir="rtl"] .messages--status {
  margin-left: 0;
  border-color: var(--color-success-subtle) transparent var(--color-success-subtle) var(--color-success-subtle);
  box-shadow: 8px 0 0 var(--color-success);
}
.messages--warning {
  color: var(--color-fg-warning);
  border-color: var(--color-warning-subtle) var(--color-warning-subtle) var(--color-warning-subtle) transparent; /* LTR */
  background-color: var(--color-warning-soft);
  background-image: url(../../images/icons/warning.svg);
  box-shadow: -8px 0 0 var(--color-warning); /* LTR */
}
[dir="rtl"] .messages--warning {
  border-color: var(--color-warning-subtle) transparent var(--color-warning-subtle) var(--color-warning-subtle);
  box-shadow: 8px 0 0 var(--color-warning);
}
.messages--error {
  color: var(--color-fg-danger-strong);
  border-color: var(--color-danger-subtle) var(--color-danger-subtle) var(--color-danger-subtle) transparent; /* LTR */
  background-color: var(--color-danger-soft);
  background-image: url(../../images/icons/error.svg);
  box-shadow: -8px 0 0 var(--color-danger); /* LTR */
}
[dir="rtl"] .messages--error {
  border-color: var(--color-danger-subtle) transparent var(--color-danger-subtle) var(--color-danger-subtle);
  box-shadow: 8px 0 0 var(--color-danger);
}
.messages--error p.error {
  color: var(--color-fg-danger-strong);
}