:root {
    --dot-size: 10px;

    --bg-badge-info: #eef3fd;
    --badge-text-info: #2f6eeb;
    --bg-badge-danger: #fceff0;
    --badge-text-danger: #de2d3c;
    --bg-badge-success: #ebfbf6;
    --badge-text-success: #08865c;
    --bg-badge-warning: #fff8e6;
    --badge-text-warning: #b7791f;
    --bg-badge-disabled: #f5f5f5;
    --badge-text-disabled: #9e9e9e;

    /* ----- Status badges ----- */
    --bg-badge-draft: #d2caca;
    --badge-text-draft: #606060;
    --bg-badge-open: #ebfbf6;
    --badge-text-open: #08865c;
}


.badge{
    border-radius: 24px;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
}

.badge .badge-text:before{
    content: ".";
    min-width: var(--dot-size);
    min-height: var(--dot-size);
    margin-right: 0.4rem;
    color: rgba(0, 0, 0, 0);
    border-radius: 32px;
    max-width: var(--dot-size);
    max-height: var(--dot-size);
    display: inline-flex;
    justify-content: center;
    align-items: center;

}


.badge.bg-success{
    background-color: var(--bg-badge-success)!important;
}

.badge.bg-success .badge-text:before {
    background-color: var(--badge-text-success);
}

.badge.bg-success .badge-text {
    color: var(--badge-text-success);
}

.badge.bg-info {
    background-color: var(--bg-badge-info)!important;
}
.badge.bg-info .badge-text:before {
    background-color: var(--badge-text-info);
}
.badge.bg-info .badge-text {
    color: var(--badge-text-info);
}

.badge.bg-danger {
    background-color: var(--bg-badge-danger)!important;
}
.badge.bg-danger .badge-text:before {
    background-color: var(--badge-text-danger);
}
.badge.bg-danger .badge-text {
    color: var(--badge-text-danger);
}

.badge.bg-success {
    background-color: var(--bg-badge-success)!important;
    color: var(--badge-text-success);
}
.badge.bg-success .badge-text:before {
    background-color: var(--badge-text-success);
}
.badge.bg-success .badge-text {
    color: var(--badge-text-success);
}

.badge.bg-warning {
    background-color: var(--bg-badge-warning)!important;
}
.badge.bg-warning .badge-text:before {
    background-color: var(--badge-text-warning);
}
.badge.bg-warning .badge-text {
    color: var(--badge-text-warning);
}

.badge.bg-disabled {
    background-color: var(--bg-badge-disabled)!important;
}
.badge.bg-disabled .badge-text:before {
    background-color: var(--badge-text-disabled);
}
.badge.bg-disabled .badge-text {
    color: var(--badge-text-disabled);
}


/** ---- Status badges ---- **/

.badge.bg-draft {
    background-color: var(--bg-badge-draft)!important;
}
.badge.bg-draft .badge-text:before {
    background-color: var(--badge-text-draft);
}
.badge.bg-draft .badge-text {
    color: var(--badge-text-draft);
}

.badge.bg-sent,
.badge.bg-open {
    background-color: var(--bg-badge-open)!important;
}


.badge.bg-sent .badge-text:before,
.badge.bg-open .badge-text:before {
    background-color: var(--badge-text-open);
}

.badge.bg-sent .badge-text,
.badge.bg-open .badge-text {
    color: var(--badge-text-open);
}