.badge when (@badges) {
    background  : @primary-bg;
    color       : @primary-color;
    min-width   : 1em;
    padding     : @padding-small-vertical;
    font-size   : @font-size-small;
    font-weight : bold;
    line-height : 1em;
    white-space : nowrap;
    text-align  : center;
    .inline-block(baseline);
    .box-sizing(content-box);

    &.block {
        display : block;
    }

    &:empty {
        display : none;
    }

    &.success, &.info, &.error, &.warning {
        & when (@badge-colors) {
            color : #fff;
        }
    }
    &.success when (@badge-success) and (@badge-colors) {
        background : @brand-success;
    }
    &.warning when (@badge-warning) and (@badge-colors) {
        background : @brand-warning;
    }
    &.error when (@badge-error) and (@badge-colors) {
        background : @brand-error;
    }
    &.info when (@badge-info) and (@badge-colors) {
        background : @brand-info;
    }
    &.inverse when (@badge-inverse) and (@badge-colors) {
        background : @primary-color;
        color      : @primary-bg;
    }
    &.black when (@badge-colors) {
        background : #000;
        color      : #fff;
    }

    &.outline {
        background : transparent;
        color      : inherit;
        border     : 1px solid @gray;
    }

    &.circle when (@badge-circle) and (@badges-type) {
        .border-radius(1em);
    }
    &.rounded when (@badge-rounded) and (@badges-type) {
        .border-radius(.5em);
    }
    &.leaflet-right when (@badge-leaflet-right) and (@badges-type) {
        .border-radius(@border-radius-large 0);
    }
    &.leaflet-left when (@badge-leaflet-left) and (@badges-type) {
        .border-radius(0 @border-radius-large);
    }
}