/* Etiqueta de estado, como nos sistemas legislativos: "EM VOTAÇÃO", "APROVADA", "VETADA".
   Uso: <span class="etiqueta etiqueta--sucesso">Aprovada</span>.
   Com ponto: acrescente <span class="etiqueta__ponto"></span>. Ao vivo: etiqueta--ao-vivo. */

.etiqueta {
  --etiqueta-cor: var(--cor-texto-secundario);
  --etiqueta-fundo: var(--cor-superficie-suave);

  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  font-family: var(--fonte-mono);
  font-size: var(--texto-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--etiqueta-cor);
  background: var(--etiqueta-fundo);
  border: 1px solid color-mix(in srgb, var(--etiqueta-cor) 22%, transparent);
  border-radius: var(--raio-pilula);
}

.etiqueta__ponto {
  width: 6px;
  height: 6px;
  flex: none;
  color: var(--etiqueta-cor);
  background: currentColor;
  border-radius: 50%;
}

.etiqueta--marca {
  --etiqueta-cor: var(--cor-marca);
  --etiqueta-fundo: var(--cor-marca-suave);
}

.etiqueta--sucesso {
  --etiqueta-cor: var(--cor-sucesso);
  --etiqueta-fundo: var(--cor-sucesso-suave);
}

.etiqueta--erro {
  --etiqueta-cor: var(--cor-erro);
  --etiqueta-fundo: var(--cor-erro-suave);
}

.etiqueta--alerta {
  --etiqueta-cor: var(--cor-alerta);
  --etiqueta-fundo: var(--cor-alerta-suave);
}

.etiqueta--info {
  --etiqueta-cor: var(--cor-info);
  --etiqueta-fundo: var(--cor-info-suave);
}

.etiqueta--ouro {
  --etiqueta-cor: var(--cor-ouro);
  --etiqueta-fundo: var(--cor-ouro-suave);
}

/* Ao vivo: o ponto pulsa. */
.etiqueta--ao-vivo .etiqueta__ponto {
  animation: pulsar 1.8s var(--curva-padrao) infinite;
}