/* Generated by brand/scripts/build-components.mjs from brand/components/. Do not edit. Load public/tokens/tokens.css first. */

/* Notice: a row with a square mark, the text and, if there is one, its action. Several go together in nu-notices,
   glued by a 1 px line. The mark is orange (needs attention); the feedback colors say it went well, informs, warns or
   failed. nu-message is the one-line status under a form ("We sent you the code"). */
.nu-notices {
  display: flex;
  flex-direction: column;
  gap: var(--nu-border-width);
  border: var(--nu-border-width) solid var(--nu-color-border);
  background: var(--nu-color-border);
}

.nu-notice {
  display: flex;
  box-sizing: border-box;
  min-height: var(--nu-control-row);
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nu-space-12);
  padding: var(--nu-space-10) var(--nu-space-18);
  background: var(--nu-color-surface);
  font-size: var(--nu-size-small);
  color: var(--nu-color-ink);
}

.nu-notice__mark {
  width: var(--nu-control-mark);
  height: var(--nu-control-mark);
  flex: none;
  background: var(--nu-color-accent);
}

.nu-notice__text {
  min-width: 0;
  flex: 1 1 var(--nu-layout-text-min);
}

.nu-notice--success .nu-notice__mark { background: var(--nu-color-success); }
.nu-notice--info .nu-notice__mark { background: var(--nu-color-info); }
.nu-notice--warning .nu-notice__mark { background: var(--nu-color-warning); }
.nu-notice--error .nu-notice__mark { background: var(--nu-color-error); }

.nu-message {
  margin: 0;
  font-size: var(--nu-size-small);
  color: var(--nu-color-muted);
}

.nu-message:empty {
  display: none;
}

.nu-message--success { color: var(--nu-color-success); }
.nu-message--error { color: var(--nu-color-error); }