.badge {
    line-height: 1rem;
    background-color: var(--background-color, white);
    color: var(--text-color, var(--bs-badge-color));
    &.badge-hollow {
        --text-color: var(--black);
    }
}

.badge-cibor-blue {
    --text-color: var(--white);
    --background-color: var(--cibor-blue);
}

.badge-white {
    --text-color: var(--black);
    --background-color: var(--white);
}

.badge-cibor-green {
    --text-color: var(--white);
    --background-color: var(--cibor-green);
}

.badge-cibor-light {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--cibor-light);
}

.badge-cibor-light-blue {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--cibor-light-blue);
}

.badge-cibor-gray-extra-light {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--cibor-gray-extra-light);
}

.badge-white {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--white);
}

.badge-leak-detection {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--lavender-mist);
}

.badge-build-pathology {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--flesh);
}

.badge-repairs {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--nyanza);
}

.badge-socks {
    --text-color: var(--cibor-gray-dark);
    --background-color: var(--blue-chalk);
}

.badge-dossier {
    --text-color: var(--white);
    --background-color: var(--mikado-yellow);
}

.badge-log {
    --text-color: var(--white);
    --background-color: var(--medium-persian-blue);
}

.badge-priority-score {
    --text-color: var(--white);
    --background-color: var(--medium-persian-blue);
}

.badge-btn{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.70rem;
    --bs-badge-font-size: 1rem;
    --bs-badge-font-weight: 400;
    --bs-badge-line-height: 1.5;
}

.badge-btn:has(svg) {
    --bs-badge-padding-y: 0.61rem;
    --bs-badge-padding-x: 0.70rem;
}

.badge-btn-sm{
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.54rem;
    --bs-badge-font-size: 0.875rem;
    --bs-badge-font-weight: 400;
    --bs-badge-line-height: 1.5;
    --bs-badge-border-radius: 0.25rem;
}

.badge-btn-sm:has(svg) {
    --bs-badge-padding-y: 0.40rem;
    --bs-badge-padding-x: 0.54rem;
}

.badge-sm {
    --bs-badge-font-size: 0.75em !important;
    --bs-badge-font-weight: 400 !important;
}

.badge-counter {
    --text-color: var(--dark);
    --background-color: var(--primary-200);
    --bs-badge-padding-x: 0.35rem;
    --bs-badge-padding-y: 0.10em;
    --bs-badge-font-size: 0.75em;
    --bs-badge-font-weight: 400;
}

.btn .badge-counter {
    top: 0; /* Override top: -1px from Bootstrap */
}

.badge-group {
    /** Use same css as Bootstrap's btn-group' */
    border-radius: var(--bs-border-radius);
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.badge.bg-light {
    --background-color: var(--cibor-light) !important;
    --text-color: var(--dark) !important;
}

.badge-secondary {
    --background-color: var(--bs-secondary) !important;
    --text-color: var(--dark) !important;
}
.badge-light {
    --background-color: var(--cibor-light) !important;
    --text-color: var(--dark) !important;
}