@import '../../style/app.scss';

@mixin avatar-size($size, $font-size) {
  width: $size;
  height: $size;
  line-height: $size;
  border-radius: 50%;
  font-size: $font-size;
}

.Yep-avatar {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: $avatar-color;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: $avatar-bg;
  @include avatar-size($avatar-size-base, $avatar-font-size-base);

  &-image {
    background: transparent;
  }

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

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

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

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

  &-icon {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}