@use "../../libs/css/mixin" as *;
@use "../../libs/css/theme" as *;

@include b(avatar) {
  @include flex;
  align-items: center;
  justify-content: center;

  @include m(circle) {
    border-radius: $hy-radius-circle;
  }

  @include m(square) {
    border-radius: $hy-border-margin-padding-sm;
  }

  @include m(small) {
    width: $hy-avatar-size-sm;
    height: $hy-avatar-size-sm;
  }

  @include m(medium) {
    width: $hy-avatar-size-base;
    height: $hy-avatar-size-base;
  }

  @include m(large) {
    width: $hy-avatar-size-lg;
    height: $hy-avatar-size-lg;
  }

  @include e(image) {
    width: 100%;
    height: 100%;

    @include m(circle) {
      border-radius: $hy-radius-circle;
      overflow: hidden;
    }

    @include m(square) {
      border-radius: $hy-border-margin-padding-sm;
    }
  }
}