@import '../common/style/index.less';

.@{prefix}-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: 600;

  &__wrapper {
    float: left;
    position: relative;
    background-color: #d4e3fc;
    color: #0052d9;
    border-radius: 999rpx;

    .@{prefix}-badge {
      &-host {
        position: absolute;
      }

      &__round {
        top: -10%;
        right: -10%;
      }

      &__circle {
        top: -5%;
        right: -5%;
      }
    }
  }

  &.@{prefix}-size-l {
    width: 128rpx;
    height: 128rpx;
    font-size: 52rpx;
  }

  &.@{prefix}-size-m {
    width: 96rpx;
    height: 96rpx;
    font-size: 40rpx;
  }

  &.@{prefix}-size-s {
    width: 64rpx;
    height: 64rpx;
    font-size: 28rpx;
  }

  .@{prefix}-image,
  &__image {
    width: 100%;
    height: 100%;
  }

  &--circle {
    border-radius: 999rpx;
    overflow: hidden;
  }

  &--round {
    border-radius: 10rpx;
    overflow: hidden;
  }

  &__text,
  &__icon {
    font-size: inherit;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    &:empty {
      width: 0;
      height: 0;
    }
  }
}