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

/* Status: a square of color next to a system label. Grey is inactive, orange is active or needs attention, green is
   online. */
.nu-status {
  display: inline-flex;
  align-items: center;
  gap: var(--nu-space-8);
  font-family: var(--nu-font-family-mono);
  font-size: var(--nu-size-label);
  font-weight: var(--nu-font-weight-regular);
  letter-spacing: var(--nu-font-letter-spacing-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nu-color-muted);
}

.nu-status::before {
  width: var(--nu-control-mark);
  height: var(--nu-control-mark);
  flex: none;
  background: var(--nu-color-faint);
  content: "";
}

.nu-status--active::before { background: var(--nu-color-accent); }
.nu-status--online::before { background: var(--nu-color-online); }
.nu-status--alert { color: var(--nu-color-accent); }
.nu-status--alert::before { background: var(--nu-color-accent); }