/* Etiqueta de status (Atlassian Lozenge). Tons: neutro, sucesso, perigo, aviso, info, novo,
   primaria. <c-etiqueta tom="sucesso">Aprovado</c-etiqueta>; "forte" para fundo cheio. */

.ds-etiqueta {
  display: inline-block;
  padding: 0 var(--espaco-050);
  border-radius: var(--raio-pequeno);
  font: var(--fonte-texto-p);
  font-weight: var(--peso-negrito);
  text-transform: uppercase;
  line-height: 1rem;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--cor-neutro-fundo);
  color: var(--cor-neutro-texto);
}
.ds-etiqueta--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso-texto); }
.ds-etiqueta--perigo { background: var(--cor-perigo-fundo); color: var(--cor-perigo-texto); }
.ds-etiqueta--aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso-texto); }
.ds-etiqueta--info { background: var(--cor-info-fundo); color: var(--cor-info-texto); }
.ds-etiqueta--novo { background: var(--cor-novo-fundo); color: var(--cor-novo-texto); }
.ds-etiqueta--primaria { background: var(--cor-primaria-suave); color: var(--cor-primaria-texto); }

.ds-etiqueta--forte { color: var(--cor-texto-inverso); }
.ds-etiqueta--forte.ds-etiqueta--sucesso { background: var(--cor-sucesso); }
.ds-etiqueta--forte.ds-etiqueta--perigo { background: var(--cor-perigo); }
.ds-etiqueta--forte.ds-etiqueta--aviso { background: var(--cor-aviso); color: var(--cor-sobre-aviso); }
.ds-etiqueta--forte.ds-etiqueta--info { background: var(--cor-info); }
.ds-etiqueta--forte.ds-etiqueta--novo { background: var(--cor-novo); }
.ds-etiqueta--forte.ds-etiqueta--primaria { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.ds-etiqueta--forte.ds-etiqueta--neutro { background: var(--ds-background-neutral-bold); }

/* Contador (Atlassian Badge): número em pílula. */
.ds-contador {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0 var(--espaco-075);
  border-radius: var(--raio-total);
  font: var(--fonte-texto-p);
  text-align: center;
  background: var(--cor-neutro-fundo);
  color: var(--cor-texto);
  font-variant-numeric: tabular-nums;
}
.ds-contador--primaria { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.ds-contador--importante { background: var(--cor-perigo); color: var(--cor-texto-inverso); }