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

  // 数字或文本
  &__text {
    height: $badge-height;
    line-height: $badge-height;
    padding: 0 $badge-padding-x;
    font-size: $badge-font-size;
    color: $gray-9;
    text-align: center;
    display: block;
    background-color: $white; // 默认为红色
    border-radius: $badge-border-radius;
    border: 1px solid $gray-seg;
    border-radius: .08rem;
    // 定位在上方
    &--top {
      position: absolute;
      top: -.16rem;
      right: 0;
      min-width: .32rem;
      height: .32rem;
      line-height: .32rem;
      padding:0 0.08rem;
      // border: 0.02rem solid $white;
      border-radius: .16rem;
      color: $white;
      background-color: $brand-danger; // 默认为红色
      transform: translateX(50%);
      font-size: .22rem;
    }

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

    // 边框类型
    &--outline {
      color: $gray-9;
      border-color: $gray-seg;
      background-color: transparent;
    }
  }

  // 红点
  &__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);
  }

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