@import './../theme/vars.scss';

$avatar-prefix-cls: #{$vender-prefix}-avatar;

@mixin avatar-size($size, $font-size) {
  width: $size;
  height: $size;
  line-height: $size;
  border-radius: $size / 2;

  & > * {
    line-height: $size;
  }

  &.#{$avatar-prefix-cls}-icon {
    font-size: $font-size;
  }
}

.#{$avatar-prefix-cls} {
  @include avatar-size($avatar-size-base, $avatar-font-size-base);

  position: relative;
  display: inline-block;
  overflow: hidden;
  color: $avatar-color;
  text-align: center;
  white-space: nowrap;
  background: $avatar-bg;

  &-image {
    background: transparent;
  }

  &-lg {
    @include avatar-size($avatar-size-lg, $avatar-font-size-lg);
  }

  &-sm {
    @include avatar-size($avatar-size-sm, $avatar-font-size-sm);
  }

  &-square {
    border-radius: $avatar-border-radius;
  }

  // 采用 src 传入 img
  & > img {
    display: block;
    width: 100%;
    height: 100%;
  }

  // icon 支持 img

  &-icon {
    img {
      width: 100%;
      height: 100%;
    }
  }
}