.online-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-inline-size: 132px;
  max-inline-size: 100%;
  color: var(--gray-8);
  font-size: var(--fs-2xs);
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.online-count::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--green-4);
}

.online-count[data-state="online"]::before {
  background: var(--green-2);
}