.badge {
    &.badge-primary {
        background: $primary !important;
        box-shadow: 0 1px 1px rgba($primary, 0.5);
        color: $primary;        
    }
    &.badge-pink{
        background-color: $pink;
        color: $white;
    }
    &.badge-cyan{
        background-color: $cyan;
        color: $white;
    }
    &.badge-secondary-transparent {
        background: $secondary-transparent;
        color: $secondary;
    }
    &.badge-pink-transparent {
        background: $pink-transparent;
        color: $pink;
    }
    &.badge-secondary-transparent {
        background: $secondary-transparent;
        color: $secondary;
    }
    &.badge-success-transparent {
        background: $success-100;
        color: $success;
    }
    &.badge-purple-transparent {
        background:$purple-transparent;
        color: $purple;
    }
    &.badge-warning-transparent {
        background:$warning-transparent;
        color: $warning;
    }
    &.badge-danger-transparent {
        background:$danger-transparent;
        color: $danger;
    }
    &.badge-info-transparent {
        background:$info-transparent;
        color: $info;
    }
}
@each $color, $value in $theme-colors {
    .badge {
        &.badge-#{$color} {
            background: #{$value};
            color: $white;
        }
        &.badge-soft-#{$color} {
            background: rgba($value, 0.1);
            color: $value;
        }
        &.badge-outline-#{$color} {
            border: 1px solid #{$value};
            color: #{$value};
        }
    }
}
.badge{
    padding: .25rem .45rem;
    font-weight: $font-weight-semibold;
    letter-spacing: 0.5px;
    border-radius: $border-radius;
    &.badge-xs {
        font-size: 10px;
        font-weight: $font-weight-medium;
        padding: 0px 5px;
        line-height: 18px;
    }
    &.badge-sm {
        font-size: 11px;
        padding: 5px 8px;
        line-height: 11px;
    }
    &.badge-md {
        font-size: 12px;
        padding: 5px 12px;
        line-height: 1.5;
    }
    &.badge-lg {
        font-size: $font-size-14;
        padding: 0px 10px;
        line-height: 30px;
    }
    &.badge-xl {
        font-size: $font-size-16;
        padding: 0px 15px;
        line-height: 35px;
    }
}
.badge.badge-soft-purple {
    background: $purple-100 !important;
    color: $purple !important;
}
.badge.badge-soft-success {
    background: $success-100 !important;
    color: $success !important;
}
.badge.badge-soft-danger {
    background: $danger-100 !important;
    color: $danger !important;
}