/* ============================================================
   BLOCK — flash.css
   Rails flash message styles. Driven by data-type attribute
   matching Rails' default flash keys plus common extras.

   Markup (in application layout):
     <% flash.each do |type, message| %>
       <div class="flash" data-type="<%= type %>">
         <%= message %>
       </div>
     <% end %>

   Rails default keys:
     data-type="notice"   → green  (success)
     data-type="alert"    → yellow (warning)

   Extended keys (set manually in controllers):
     data-type="success"  → green
     data-type="error"    → red
     data-type="info"     → blue
   ============================================================ */

.flash {
  padding: var(--space-s) var(--space-m);
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: var(--step--1);
  line-height: var(--leading-snug);

  /* Default — neutral, for any unmapped flash keys */
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
}

/* ── Notice — positive, confirmation ─────────────────────── */

.flash[data-type="notice"],
.flash[data-type="success"] {
  color: var(--color-success-text);
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
}

/* ── Alert — warning, requires attention ─────────────────── */

.flash[data-type="alert"] {
  color: var(--color-warning-text);
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

/* ── Error — failure, destructive action result ──────────── */

.flash[data-type="error"] {
  color: var(--color-error-text);
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
}

/* ── Info — neutral information ──────────────────────────── */

.flash[data-type="info"] {
  color: var(--color-info-text);
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
}

/* ── Multiple flash messages ─────────────────────────────── */
/* Wrap in a container in your layout for consistent spacing  */

.flash + .flash {
  margin-block-start: var(--space-xs);
}