@import '../../style/themes/index';
@import './mixin.less';
@avatar-prefix-cls: ~'@{kd-prefix}-avatar';
@icon-prefix-cls: ~'@{kd-prefix}icon';

.@{avatar-prefix-cls} {
  position: relative;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: @avatar-color-background;

  &-image {
    background: transparent;
  }

  &-disabled {
    cursor: not-allowed;
  }

  &:hover:not(&-disabled) {
    cursor: pointer;
  }

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

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

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

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

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

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