/*
|--------------------------------------------------------------------------
| Status, tags e contadores
|--------------------------------------------------------------------------
|
| Status (.ds-status): estado de um registro. Pílula com ponto.
|   Tons fixos por significado — nenhum módulo inventa cor:
|     success  ativo, aprovado, respondido, concluído, liberado
|     warning  pendente, aguardando, expirando, em análise
|     danger   bloqueado, recusado, erro, vencido
|     info     processando, em andamento, agendado
|     neutral  inativo, rascunho, encerrado, arquivado
|
| Tag (.ds-tag): categoria/atributo (tipo, loja, setor). Retângulo, neutro.
| Contador (.ds-count): número ao lado de rótulo (filtros, abas).
|
*/

.ds-status {
    --ds-status-fg: var(--ds-color-neutral-fg);
    --ds-status-bg: var(--ds-color-neutral-bg);
    --ds-status-dot: var(--ds-graphite-400);

    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-width: 100%;
    padding: 2px 10px 2px 8px;

    border-radius: var(--ds-radius-full);

    background: var(--ds-status-bg);

    color: var(--ds-status-fg);

    font: 500 12px/18px var(--ds-font);
    white-space: nowrap;
}

.ds-status::before {
    content: "";

    flex: 0 0 auto;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--ds-status-dot);
}

.ds-status--success {
    --ds-status-fg: var(--ds-color-success-fg);
    --ds-status-bg: var(--ds-color-success-bg);
    --ds-status-dot: var(--ds-color-success-icon);
}

.ds-status--warning {
    --ds-status-fg: var(--ds-color-warning-fg);
    --ds-status-bg: var(--ds-color-warning-bg);
    --ds-status-dot: var(--ds-color-warning-icon);
}

.ds-status--danger {
    --ds-status-fg: var(--ds-color-danger-fg);
    --ds-status-bg: var(--ds-color-danger-bg);
    --ds-status-dot: var(--ds-color-danger-solid);
}

.ds-status--info {
    --ds-status-fg: var(--ds-color-info-fg);
    --ds-status-bg: var(--ds-color-info-bg);
    --ds-status-dot: var(--ds-color-info-icon);
}

/* Processando: o ponto pulsa (respeita movimento reduzido) */
.ds-status--processing::before {
    animation: ds-pulso 1.4s ease-in-out infinite;
}

@keyframes ds-pulso {
    50% {
        opacity: .35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-status--processing::before {
        animation: none;
    }
}

/* Tag */

.ds-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);

    max-width: 100%;
    padding: 1px 8px;

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-sm);

    background: var(--ds-color-surface-subtle);

    color: var(--ds-color-text-secondary);

    font: 500 12px/18px var(--ds-font);
    white-space: nowrap;
}

/* Chip removível (filtro ativo) */
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);

    min-height: 26px;
    padding: 0 4px 0 10px;

    border: var(--ds-border-width) solid var(--ds-color-primary-subtle-border);
    border-radius: var(--ds-radius-full);

    background: var(--ds-color-primary-subtle);

    color: var(--ds-color-primary-active);

    font: 500 12px/18px var(--ds-font);
}

.ds-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: inherit;

    cursor: pointer;
}

.ds-chip__remove:hover {
    background: var(--ds-pink-100);
}

.ds-chip__remove:focus-visible {
    outline: var(--ds-focus-outline);
    outline-offset: 0;
}

/* Contador */

.ds-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;
    padding: 0 6px;

    border-radius: var(--ds-radius-full);

    background: var(--ds-color-neutral-bg);

    color: var(--ds-color-text-secondary);

    font: 600 11px/1 var(--ds-font);
    font-variant-numeric: tabular-nums;
}

.ds-count--primary {
    background: var(--ds-color-primary);

    color: var(--ds-color-on-primary);
}

/* Contador sem número (ainda carregando ou zero não exibido) some */
.ds-count:empty {
    display: none;
}