.#{$avatar-prefix-cls}{
  $root:#{&};
  position: relative;
  display: inline-block;
  width:$avatar-width;
  height:$avatar-height;
  line-height: $avatar-height;
  border-radius: 50%;
  background-color: $gray;
  text-align: center;
  img{
    border-radius: 50%;
    width:100%;
    vertical-align: top;
  }
  &__text{
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    font-size: $avatar-text-font-size;
    color: $avatar-text-color;
    white-space: nowrap;
    vertical-align: top;
  }
  &__dot{
    position: absolute;
    transform: translateX(-50%);
    top: 0;
    right: -$avatar-dot-width/2;
    height: $avatar-dot-height;
    width: $avatar-dot-width;
    border-radius: 100%;
    border:1px solid $white;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
    @extend %gradient-red;
  }

  //color
  @each $key, $value in $color-status{
    &--#{$key} {
      #{$root}__dot{
        @extend %gradient-#{nth($value,1)};
      }
    }
  }

  //size
  &--sm{
    width:$avatar-width-sm;
    height:$avatar-height-sm;
    line-height: $avatar-height-sm;

    #{$root}__text{
      font-size:$avatar-text-font-size-sm;
    }
  }

}