$name: 'ivue-avatar';

:root {
  --#{$name}-size: 32px;
  --#{$name}-square-radius: 4px;
  --#{$name}-image-object-fit: cover;
}

.#{$name} {
  display: inline-flex;
  text-align: center;
  background: var(--ivue-disabled-color);
  color: var(--ivue-white-color);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  width: var(--#{$name}-size);
  height: var(--#{$name}-size);
  line-height: var(--#{$name}-size);

  /* 图片 */
  &-img {
    width: 100%;
    height: 100%;
    object-fit: var(--#{$name}-image-object-fit);
  }

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

  /* 正方形 */
  &-square {
    border-radius: var(--#{$name}-square-radius);
  }
}