.badge {
    font-size: 14px;
    font-weight: 600;
    line-height: 150%;
    border-radius: 8px;
    height: fit-content;
    letter-spacing: .008em;
    padding: var(--spacing-xxs) var(--spacing-xs);
}

.badge-primary {
    background-color: var(--primary-color-100);
    color: var(--primary-color-800);
}

.badge-gray {
    background-color: var(--gray-shade-100);
    color: var(--gray-shade-800);
}

.badge-warning {
    background-color: var(--warning-100);
    color: var(--warning-700);
}

.badge-success {
    background-color: var(--success-100);
    color: var(--success-700);
}

.badge-info {
    background-color: var(--info-100);
    color: var(--info-800);
}

.badge-danger {
    background-color: var(--danger-100);
    color: var(--danger-700);
}

.pill {
    background-color: var(--primary-color-50);
    color: var(--primary-color-950);
    border: var(--primary-color-600) 1px solid;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    border-radius: var(--spacing-xs);
    letter-spacing: .008em;
    padding: var(--spacing-xxs) var(--spacing-xs);
}

.pill-dark {
    background: var(--gray-shade-300);
    color: var(--primary-color-800);
    border: 0px;
}