.badge-btn {
    margin-left: 0.3rem;
    color: $darker-gray;
    background-color: $light-gray;
}
.btn-light.active .badge-btn {
    color: $lighter-gray;
    background-color: $dark-gray;
}
.badge-btn-zero {
    margin-left: 0.3rem;
    color: $medium-gray;
    background-color: $white;
}
.bg-info, .bg-warning, .bg-light {
    color: $darker-gray;
}

%badge {
    border-radius: $badge-border-radius;
    text-align: center;
    min-width: 3.5rem;
    padding-inline: 0.3rem;
    font-weight: normal;
}

.badge-grade {
    @extend %badge;
    color: $black;
    transition: box-shadow 0.15s ease-in-out;
}

#results-grid .badge-grade {
    min-width: 2.5rem;
}

.badge-participants {
    @extend %badge;
    background-color: $evap-dark-blue;
    color: white;

    .fa-user {
        font-size: 80%;
    }

    @include bar-shadow($evap-dark-blue);
}

.badge-percentage {
    @extend %badge;
    background-color: $evap-light-blue;
    color: black;
    display: inline-block;
    width: 100%;
}

@for $i from 0 through 10 {
    .badge-participants-#{$i} {
        background-color: mix($evap-dark-blue, $evap-light-blue, $i * 10%);
    }
}

.badge-disabled {
    background-color: $light-gray;
    color: tint-color($medium-gray, 10%);
    text-shadow: none;
}

.bg-primary-outline {
    background-color: $white;
    color: $evap-dark-blue;
    border: 1px solid $evap-dark-blue;
    padding: 0.27em 0.35em;
}

.bg-secondary-outline {
    background-color: $white;
    color: $secondary;
    border: 1px solid $secondary;
    padding: 0.27em 0.35em;
}
