/**
 * @file
 * Status messages.
 *
 * SIZE
 * ----
 * These were set at `--step--1` — 15px — which is the size this theme uses for
 * metadata on a card: a date, a price, a category. A status message is not
 * metadata. "Event has been successfully submitted for review" is the answer to
 * the only question the person who just spent ten minutes filling in that form
 * has, and it was set smaller than the form labels above it.
 *
 * Body size now, with the heading a step above it, and more room around both.
 */

.messages {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-m);
  margin-block: var(--space-m);
  border: 1px solid var(--border-subtle);
  border-inline-start-width: 4px;
  border-radius: var(--radius-m);
  background: var(--surface-1);
  box-shadow: var(--lift-rest-shadow);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
}

.messages__icon {
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  /* Optically centred on the first line of text rather than on its box. */
  margin-block-start: 0.15em;
}

.messages__title {
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-2xs);
}

/* The message itself, beside the icon. */
.messages__content,
.messages > div:last-child {
  min-inline-size: 0;
}

.messages p:last-child {
  margin-block-end: 0;
}

.messages ul {
  margin: 0;
  padding-inline-start: var(--space-m);
}

.messages--status { border-inline-start-color: var(--me-success); }
.messages--status .messages__icon { color: var(--me-success); }

.messages--warning { border-inline-start-color: var(--me-warning); }
.messages--warning .messages__icon { color: var(--me-warning); }

.messages--error { border-inline-start-color: var(--me-error); }
.messages--error .messages__icon { color: var(--me-error); }