.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--var-bg-color);
    color: var(--var-text-color);
    border: 1px solid transparent;
    border-radius: var(--badge-border-radius);
    font-size: var(--badge-font-size);
    @include space-many(var(--badge-padding-vertical), var(--badge-padding-horizontal), $name: "padding");
    white-space: nowrap;

    &.round {
        @include space($badge-round-padding-horizontal, $name: "padding", $direction: "horizontal")
    }

    &.link {
        background-color: transparent;
        color: var(--var-bg-color);
        border-color: var(--var-bg-color);
    }

    &.size-lg { font-size: $badge-lg-font-size; }
    &.size-xl { font-size: $badge-xl-font-size; }
}