.badge {
    text-transform: uppercase;
    
    &-full {
        min-width: 8.750rem;
    }

    &-notification {
        position: absolute;
        top: -0.3rem;
        left: 55%;
        padding: 0 3px;
        border-radius: .675em;
        height: 1.4em;
        width: 1.4em;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9;
        font-weight: $font-weight-light;
    }
}

// Creates the "outline" badge variant
@each $color, $value in $theme-colors {
    .badge.bg-outline-#{$color} {
        @include badge-variant-outline($value, $value, $value);
    }
}

// Override default badge
.badge.bg-outline-default {
    @include badge-variant-outline($gray-500, $default, $border-color);
}