@import './token.less';
// @import './mixin.less';

@btn-prefix-cls: ~'@{prefix}-Avatar';

.@{btn-prefix-cls} {
  display: inline-block;
  position: relative;
  outline: none;
  appearance: none;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: 1;

  &-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: @gray-3;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-square {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-decoration {
    width: 120%;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -10%;
    right: 0;
    bottom: 0;
  }
  &-defaultBg {
    background-color: var(--color-fill-4);
  }
}