.badge,
.pp-badge {
    align-items: center;
    border-radius: var(--pp-radius-pill);
    display: inline-flex;
    font-size: var(--pp-font-size-xs);
    font-weight: 800;
    gap: var(--pp-space-1);
    letter-spacing: 0;
    padding: .35rem .65rem;
}

.pp-badge--success,
.badge-success {
    background: var(--pp-color-badge-success-bg);
    color: var(--pp-color-success);
}

.pp-badge--neutral,
.badge-secondary {
    background: var(--pp-color-badge-neutral-bg);
    color: var(--pp-color-ink-muted);
}

.pp-badge--warning {
    background: var(--pp-color-badge-warning-bg);
    color: var(--pp-color-warning);
}

.pp-badge--danger {
    background: var(--pp-color-badge-danger-bg);
    color: var(--pp-color-danger);
}

.status-circle {
    border-radius: 50%;
    display: inline-block;
    height: .75rem;
    width: .75rem;
}

.status-circle.active {
    background-color: var(--pp-color-success);
}

.status-circle.inactive {
    background-color: var(--pp-color-ink-soft);
}