bootstrap/scss/_badge.scss

@use "config" as *;
@use "colors" as *;
@use "variables" as *;
@use "mixins/border-radius" as *;
@use "mixins/gradients" as *;
@use "vendor/rfs" as *;

// scss-docs-start badge-variables
$badge-font-size:                   .75em !default;
$badge-font-weight:                 $font-weight-bold !default;
$badge-color:                       $white !default;
$badge-padding-y:                   .35em !default;
$badge-padding-x:                   .65em !default;
$badge-border-radius:               var(--#{$prefix}border-radius) !default;
// scss-docs-end badge-variables

@layer components {
  .badge {
    // scss-docs-start badge-css-vars
    --#{$prefix}badge-padding-x: #{$badge-padding-x};
    --#{$prefix}badge-padding-y: #{$badge-padding-y};
    @include rfs($badge-font-size, --#{$prefix}badge-font-size);
    --#{$prefix}badge-font-weight: #{$badge-font-weight};
    --#{$prefix}badge-color: #{$badge-color};
    --#{$prefix}badge-border-radius: #{$badge-border-radius};
    // scss-docs-end badge-css-vars

    display: inline-block;
    padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
    @include font-size(var(--#{$prefix}badge-font-size));
    font-weight: var(--#{$prefix}badge-font-weight);
    line-height: 1;
    color: var(--#{$prefix}badge-color);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    @include border-radius(var(--#{$prefix}badge-border-radius));
    @include gradient-bg();

    // Empty badges collapse automatically
    &:empty {
      display: none;
    }
  }

  // Quick fix for badges in buttons
  .btn .badge {
    position: relative;
    top: -1px;
  }
}