@import '../../style/themes/index';
@import '../../style/mixins/index';

@yee-avatar-prefix-cls: ~'@{yee-prefix}-avatar';

.@{yee-avatar-prefix-cls} {
  .yee-reset-component;

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

  &-image {
    background: transparent;
  }

  .yee-avatar-size(@yee-avatar-size-base, @yee-avatar-font-size-base);

  &-lg {
    .yee-avatar-size(@yee-avatar-size-lg, @yee-avatar-font-size-lg);
  }

  &-sm {
    .yee-avatar-size(@yee-avatar-size-sm, @yee-avatar-font-size-sm);
  }

  &-square {
    border-radius: @yee-avatar-border-radius;
  }

  & > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.yee-avatar-size(@size, @yee-font-size) {
  width: @size;
  height: @size;
  line-height: @size;
  border-radius: 50%;

  &-string {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
  }

  &.@{yee-avatar-prefix-cls}-icon {
    font-size: @yee-font-size;
  }
}