.#{$badge-prefix-cls} {
  position: relative;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;

  // 数字或文本
  &__text {
    height: $badge-height;
    padding: 0 $badge-padding-x;
    font-size: $badge-font-size;
    line-height: $badge-height;
    color: #fff;
    text-align: center;
    background-color: $brand-danger; // 默认为红色
    border-radius: $border-radius;
    // 定位在上方
    &--top {
      position: absolute;
      top: -$badge-height/2;
      right: 0;
      transform: translateX(50%);
    }

    // 圆角类型
    &--round {
      border-radius: $badge-height;
    }

    // 边框类型
    &--outline {
      line-height: $badge-height - $border-width-sm*2;
      color: $brand-danger;
      background-color: transparent;
      border: $border-width-sm solid $brand-danger;
    }
  }

  // 红点
  &__dot {
    position: absolute;
    top: -$badge-dot-size/2;
    right: 0;
    width: $badge-dot-size;
    height: $badge-dot-size;
    background-color: $brand-danger; // 默认为红色
    border: $border-width-sm solid $white;
    border-radius: 50%;
    transform: translateX(50%);

    &--large {
      width: $badge-dot-lg-size;
      height: $badge-dot-lg-size;
    }
  }


  // 颜色
  &--primary {
    @include badge-variant($brand-primary);
    @include badge-variant-outline($brand-primary);
  }

  &--success {
    @include badge-variant($brand-success);
    @include badge-variant-outline($brand-success);
  }

  &--danger {
    @include badge-variant($brand-danger);
    @include badge-variant-outline($brand-danger);
  }

  &--warning {
    @include badge-variant($brand-warning);
    @include badge-variant-outline($brand-warning);
  }

  &--inverse {
    @include badge-variant($brand-inverse);
    @include badge-variant-outline($brand-inverse);
  }
}
