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

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

.@{avatar-prefix-cls} {
  .reset-component();

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

  &-image {
    background: transparent;
  }

  .@{vts-prefix}-image-img {
    display: block;
  }

  .avatar-size(@avatar-size-xs, @avatar-font-size-xs);

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

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

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

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

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

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

  &-circle {
    border-radius: 50%;
  }

  &-square {
    border-radius: 0;
  }

  &-rounded {
    border-radius: @avatar-rounded-border-radius;
  }

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

.avatar-size(@size, @font-size) {
  width: @size;
  height: @size;
  line-height: @size;

  .@{avatar-prefix-cls}-string {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
    display: inline-block;
    user-select: none;
    transform: translateX(-50%);
  }

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

    > .@{iconfont-css-prefix} {
      margin: 0;
    }
  }
}

@import './group';
@import './rtl';