@import url(../var.less);

@avatar-prefix: ~"@{prefix}avatar";

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

.@{avatar-prefix}{
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: @avatar-font-color;
  background: @avatar-background-color;
  font-size: @avatar-font-size;
  .avatar-size(@avatar-size, @avatar-size, @avatar-size);

  >img {
    display: block;
    height: 100%;
    vertical-align: middle;
  }

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

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

  &--icon&--large {
    font-size: @avatar-large-icon-font-size;
  }

  &--icon {
    font-size: @avatar-icon-font-size;
  }

  &--icon&--medium {
    font-size: @avatar-medium-icon-font-size;
  }

  &--icon&--small{
    font-size: @avatar-small-icon-font-size;
  }

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

  &--medium {
    .avatar-size(@avatar-medium-size, @avatar-medium-size, @avatar-medium-size)
  }

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