/* Point — un état dit par une couleur, à côté d'un texte.
   Référence : docs/design-system.md. */

.dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--dot-color, currentcolor);
  vertical-align: middle;
}

/* --- Taille et forme --- */

.dot--lg {
  width: 12px;
  height: 12px;
}

.dot--square {
  border-radius: var(--radius-xs);
}

/* --- Rôles --- */

:is(.dot--success, .dot--warning, .dot--danger, .dot--primary, .dot--muted) {
  --dot-color: var(--tone-solid);
}

/* --- Tons (sortis de tone.css au passage au harness 0.13) : chaque ton pose les seules
   propriétés `--tone-*` que ce composant lit, d'après les tokens du ton. --- */

.dot--success {
  --tone-solid: var(--color-success);
}

.dot--warning {
  --tone-solid: var(--color-warning);
}

.dot--danger {
  --tone-solid: var(--color-danger);
}

.dot--primary {
  --tone-solid: var(--color-primary);
}

.dot--muted {
  --tone-solid: var(--color-text-muted);
}