/**
 *  <span class="badge">
 *     A
 *  </span>
 *
 *
 */

@mixin plain-ui__component__badge()
{
    .badge {
        display: inline-block;

        background-color: var(--primary);
        color: white;

        font-size: 0.85rem;
        padding: 0.4em 0.8em;

        @extend .border;
        @extend .border-round;

        &--round {
            display: inline-flex;
            justify-content: center;

            border-radius: 50%;
            width: 2.5em;
        }
    }
}