@use "sass:math";
@import '../variables/default.scss';
@import '../mixins/index.scss';

$at-badge-border-radius: $at-badge-font-size * 0.7;
$at-badge-box-shadow: 0 4px 8px 0 rgba($color: $at-badge-bg-color, $alpha: 0.2);

.at-badge {
  position: relative;
  /*  #ifdef  rn  */
  // 行内样式自己的宽度，不撑满一行
  align-self: flex-start;
  /*  #endif  */
  /*  #ifndef  rn  */
  //  display: inline-block;
  //  vertical-align: middle;
  /*  #endif  */
  width: 100%;

  /* elements */
  &__dot {
    position: absolute;
    right: -16px;
    top: -6px;
    width: $at-badge-dot-size;
    height: $at-badge-dot-size;
    border-radius: math.div($at-badge-dot-size, 2);
    overflow: hidden;
    background: $at-badge-bg;
    /*  #ifndef  rn  */
    //  box-shadow: $at-badge-box-shadow;
    /*  #endif  */
  }

  &__num {
    position: absolute;
    top: -$at-badge-border-radius;
    right: -16PX;
    padding: 0 $spacing-h-sm;
    color: $at-badge-color;
    font-size: $at-badge-font-size;
    border-radius: $at-badge-border-radius $at-badge-border-radius $at-badge-border-radius 0;
    background: $at-badge-bg;
    line-height: $at-badge-font-size * 1.4;
    /*  #ifndef  rn  */
    //  box-shadow: $at-badge-box-shadow;
    //  transform: translate(50%, 0);
    /*  #endif  */
    overflow: hidden;
    z-index: 1;
  }
}