/* Esito di un'azione: i messaggi di Django (components/messages.html). */

@layer components {
  .msgs {
    display: grid;
    gap: 8px;
    margin-bottom: 24px;
  }
  /* in cima a una pagina: <div class="wrap msgs-page">{% include messages.html %}</div> */
  .msgs-page .msgs { margin-bottom: 0; padding-top: 24px; }
  .msg {
    padding: 12px 18px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    font-size: var(--step-small);
    font-weight: 500;

    &.error, &.warning { background: var(--ground); box-shadow: inset 0 0 0 2px var(--heart); }
    &.info { background: var(--tint); }
  }
}