.badge {
    display: inline-block;
    padding: .2em .4em;
    line-height: 1;
    text-align: center;
    border-radius: 2px;
    vertical-align: baseline;

    &:empty {
        display: none;
    }

    //    Contextual colors
    // ----------------------------------

    &-default {
        color: white;
        background-color: $gray-400;
    }

    &-primary {
        color: white;
        background-color: $primary;
    }

    &-info {
        color: white;
        background-color: $info;
    }

    &-success {
        color: white;
        background-color: $success;
    }

    &-warning {
        color: black;
        background-color: $warning;
    }

    &-danger {
        color: white;
        background-color: $danger;
    }
}