.connection {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.connection__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-full);
  background: currentColor;
}

.connection--online .connection__dot {
  background: var(--color-status-online);
}

.connection--pending .connection__dot {
  background: var(--color-status-pending);
}

.connection--offline .connection__dot {
  background: var(--color-status-offline);
}

/* Marks the status as simulated without drawing attention away from the content */
.connection__tag {
  padding: 0 var(--space-1);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}