@import '../../../styles/mixins';
@import '../../../styles/definitions/colors';

$badge-success-bgcolor: $success-color;
$badge-emphasis-bgcolor: $info-color;
$badge-pending-bgcolor: $warning-color;
$badge-error-bgcolor: $error-color;

.badge {
    &_wrapper {
        display: inline-block;
        @include text-7;
        @include text-upper;
        @include color-darkGray;
        @include border-radius(3px);
        font-weight: bold;
        padding: 2px 15px;
        text-align: center;

        // Prevent bad vertical-align if we use the --bodyFont variable
        font-family: $generic-fontFace;

        &--default {
            @include border-gray;
            @include background-white;
        }

        &--error {
            @include color-white;
            background-color: $badge-error-bgcolor;
        }

        &--success {
            @include color-white;
            background-color: $badge-success-bgcolor;
        }
    
        &--emphasis {
            @include color-white;
            background-color: $badge-emphasis-bgcolor;
        }
    
        &--pending {
            @include color-white;
            background-color: $badge-pending-bgcolor;
        }
    }
}
