.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;}
}