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

@include b(avatar) {
  font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-variant: tabular-nums;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: center;
  background: var(--avatar-default-bg-color);
  color: var(--avatar-default-color);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  border-radius: var(--avatar-border-radius);
  font-size: var(--avatar-fontSize);

  > img {
    width: 100%;
    height: 100%;
    display: block;
  }

  @include m(md) {
    @include avatar-size(var(--avatar-width-md), var(--avatar-height-md), var(--avatar-fontSize-icon-md));
  }
  /* Avatar sizes */
  @include m(xl) {
    @include avatar-size(var(--avatar-width-xl), var(--avatar-height-xl), var(--avatar-fontSize-icon-xl));
  }

  @include m(lg) {
    @include avatar-size(var(--avatar-width-lg), var(--avatar-height-lg), var(--avatar-fontSize-icon-lg));
  }

  @include m(sm) {
    @include avatar-size(var(--avatar-width-sm), var(--avatar-height-sm), var(--avatar-fontSize-icon-sm));
  }

  @include m(xs) {
    @include avatar-size(var(--avatar-width-xs), var(--avatar-height-xs), var(--avatar-fontSize-icon-xs));
  }

  /* Avatar shape */
  @include m(square) {
    border-radius: var(--radius-md);
  }

  /* Avatar image */
  @include m(image) {
    background: transparent;
  }

  /* Avatar string */
  @include m(string) {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
    transform: translateX(-50%);
  }
}