@import '../../style/theme/default.less';

@badge-prefix-cls: ~'@{kui-prefix}-badge';

.@{badge-prefix-cls} {
  position: relative;
  display: inline-block;
  font-size: initial;
  vertical-align: middle;

  &-wrapper {
    display: inline-block;

    .@{badge-prefix-cls}-count {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      transform: translate(50%, -50%);
    }

    .@{badge-prefix-cls}-dot {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      transform: translate(50%, -50%);
    }
  }

  &-count {
    height: 34px;
    padding: 0 9px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
    color: #fff;
    background-color: @danger-color;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 17px;
  }

  &-dot {
    width: 18px;
    height: 18px;
    background-color: @danger-color;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
  }
}