<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dash/scss/extend/bootstrap/components/_badge.scss</h2><form method='post'><textarea name='content' class='file-edit'>.badge{
    position: relative;
    border: 1px solid currentColor;
    line-height: $badge-line-height;
    font-family: $base-font-family;
    letter-spacing: 0.01em;
    vertical-align: middle;
    display: inline-flex;
    .icon + span,span + .icon{
        @if($rtl==false){
            padding-left: 4px;
        }
        @if($rtl==true){
            padding-right: 4px;
        }
    }
    &amp;-sm{
        padding: $badge-padding-y-sm $badge-padding-x-sm;
        font-size:$badge-font-size-sm;

        &amp;.badge-pill{
            padding: $badge-padding-y-sm $badge-pill-padding-x-sm;
        }
    }
    &amp;-md{
        padding: $badge-padding-y-md $badge-padding-x-md;
        font-size:$badge-font-size-md !important;
    }
    &amp;-lg{
        padding: $badge-padding-y-lg $badge-padding-x-lg;
        font-size:$badge-font-size-lg !important;
    }
    &amp;-xl{
        padding: $badge-padding-y-xl $badge-padding-x-xl;
        font-size:$badge-font-size-xl !important;
    }
    &amp;-light {
        color: $secondary;
    }
    &amp;-lighter {
        color: $secondary-light;
    }
    .icon{
        font-size: 1rem;
    }
}
@each $name, $value in $theme-colors {
    .badge-#{$name} {
        border-color: $value;
    }
}

$outline-badges: map-merge(
    $theme-colors,
    (
        &quot;light&quot;:       $light-400,
        &quot;lighter&quot;:     $light-200
    )
);

@each $name, $value in $outline-badges {
    .badge-outline-#{$name} {
        color: $value;
        border-color: mix($value, $white, 60%);
    }
}
$dim-mix:           #fff;
$dim-badge: map-merge(
    $theme-colors,
    (
        &quot;light&quot;:       $light-400,
        &quot;lighter&quot;:     $light-200
    )
);

@each $name, $color in $dim-badge {
    .badge-dim.badge-#{$name} {
        color: $color;
        background-color: mix($color, $dim-mix, 11%);
        border-color: mix($color, $dim-mix, 11%);
    }
    .badge-dim.badge-outline-#{$name} {
        color: $color;
        background-color: mix($color, $dim-mix, 11%);
        border-color: mix($color, $dim-mix, 40%);
    }
}

.badge-dot{
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    border:none;
    @if($rtl==false){
        padding-left: $badge-dot-width + $badge-dot-gap;
        padding-right: 0;
    }
    @if($rtl==true){
        padding-right: $badge-dot-width + $badge-dot-gap;
        padding-left: 0;
    }
    font-size: $fx-sz-12;
    &amp;:before{
        position: absolute;
        content: &quot;&quot;;
        @if($rtl==false){
            left: 0;
        }
        @if($rtl==true){
            right: 0;
        }
        top: 50%;
        transform: translateY(-50%);
        display: inline-block; 
        height: $badge-dot-width;
        width: $badge-dot-width;
        margin-top: -1px;
        border-radius:50%;
        background: currentColor;
    }
    &amp;.badge-sm, &amp;.badge-md {
        @if($rtl==false){
            padding-left: $badge-dot-width-sm + $badge-dot-gap-sm;
        }
        @if($rtl==true){
            padding-right: $badge-dot-width-sm + $badge-dot-gap-sm;
        }
        &amp;:before{
            height: $badge-dot-width-sm;
            width: $badge-dot-width-sm;
            margin-top: 0;
        }
    }
    &amp;.badge-lg, &amp;.badge-xl{
        @if($rtl==false){
            padding-left: ($badge-dot-width * 2) + ($badge-dot-gap-sm + 4);
        }
        @if($rtl==true){
            padding-right: ($badge-dot-width * 2) + ($badge-dot-gap-sm + 4);
        }
        &amp;:before{
            height: ($badge-dot-width * 2);
            width: ($badge-dot-width * 2);
            margin-top: 0;
        }
    }
    &amp;-mb {}
}

$dot-badge: map-merge(
    $theme-colors,
    (
        &quot;light&quot;:       $light-400,
        &quot;lighter&quot;:     $light-200
    )
);
@each $name, $color in $dot-badge {
    .badge-dot.badge-#{$name} {
        color: $color;
    }
}

@include media-breakpoint-down(sm){
    .badge-dot-sm {
        width: 0;
        overflow: hidden;
    }
}

@media (max-width: 413px) {
    .badge-dot-mb {
        width: 0;
        overflow: hidden;
    }
}

@media (max-width: 369px) {
    .badge-dot-xs {
        width: 0;
        overflow: hidden;
    }
}</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdash%2Fscss%2Fextend%2Fbootstrap%2Fcomponents'>Back to Directory</a>