// ────────────────────────────────────────────────────────────────
// Komponente · Badge, Tag, Statuspunkt
// ────────────────────────────────────────────────────────────────

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

@each $name in (accent, ember, ok, warn, off) {
  .badge--#{$name} {
    color: var(--#{$name});
    border-color: color-mix(in srgb, var(--#{$name}) 40%, transparent);
    background: color-mix(in srgb, var(--#{$name}) 10%, transparent);
  }

  .badge--#{$name}-solid {
    color: var(--on-accent);
    background: var(--#{$name});
    border-color: color-mix(in srgb, var(--#{$name}) 78%, #000);
  }
}

// Rechteckiger Tag
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--dim);
  background: color-mix(in srgb, var(--dim) 10%, transparent);
  border-radius: var(--r-sm);
}

// Statuspunkt
.dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.dot--ok   { background: var(--ok);    box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 60%, transparent); }
.dot--warn { background: var(--ember); box-shadow: 0 0 8px var(--ember-soft); }
.dot--off  { background: var(--off);   box-shadow: 0 0 8px color-mix(in srgb, var(--off) 60%, transparent); }
.dot--idle { background: var(--muted); box-shadow: none; }