/* Marcador de cor das categorias: usado na carta pública e no painel. As variáveis --type-* vêm de tokens.css. */

.dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--ink-muted));
  box-shadow: 0 0 0 1px rgb(28 42 36 / 0.28);
}

[data-color="tinto"] { --dot: var(--type-tinto); }
[data-color="branco"] { --dot: var(--type-branco); }
[data-color="rose"] { --dot: var(--type-rose); }
[data-color="espumante"] { --dot: var(--type-espumante); }
[data-color="sobremesa"] { --dot: var(--type-sobremesa); }
[data-color="fortificado"] { --dot: var(--type-fortificado); }
[data-color="ambar"] { --dot: var(--type-ambar); }
[data-color="verde"] { --dot: var(--type-verde); }
[data-color="azul"] { --dot: var(--type-azul); }
[data-color="grafite"] { --dot: var(--type-grafite); }
[data-color="laranja"] { --dot: var(--type-laranja); }
[data-color="roxo"] { --dot: var(--type-roxo); }