.#{$avatar-prefix-cls} {
  $root: #{&};
  //color
  @each $key, $value in $color-status {
    &--#{$key} {
      #{$root}__dot {
        background-color: nth($value, 1);
      }
    }
  }
  position: relative;
  display: inline-block;
  width: $avatar-width;
  height: $avatar-height;
  line-height: $avatar-height;
  text-align: center;
  background-color: $brand-primary-10;
  border-radius: 50%;
  color: $avatar-text-color;

  img {
    width: 100%;
    vertical-align: top;
    border-radius: 50%;
  }

  &__text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    font-size: $avatar-text-font-size;
    white-space: nowrap;
    vertical-align: top;
  }

  &__dot {
    position: absolute;
    top: 0;
    right: -$avatar-dot-width / 2;
    width: $avatar-dot-width;
    height: $avatar-dot-height;
    background-color: $brand-danger;
    border: 1px solid $white;
    border-radius: 100%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    transform: translateX(-50%);
  }

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

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

  //shape
  &--square {
    border-radius:5px;
    #{$root}__dot{
      top:-3px;
      right: -6px;
    }
  }

  &--user {
    background-color: $gray-light-25;
    .user{
      color: $white;
      font-size: 20px;
    }
  }
}