sparkletown/sparkle

@import "scss/constants";

.UserAvatar {
  $avatar-sizes-map: (
    small: 25px,
    medium: 40px,
    large: 54px,
    full: 100%,
  );
  $indicator-sizes-map: (
    small: 8px,
    medium: 10px,
    large: 12px,
    full: 25%,
  );

  // NOTE: parent and img mismatch due to legacy reasons
  $default-avatar-size: 25px;
  $default-image-size: 100%;
  $default-indicator-size: 8px;

  @include square-size($default-avatar-size);
  position: relative;

  &__image {
    @include square-size($default-image-size);
    @include circle-avatar;

    border-radius: 50%;
    vertical-align: unset;
  }

  &__status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    z-index: z(user-avatar-status-indicator);
    display: block;
    @include square-size($default-indicator-size);

    @each $modifier, $size in $indicator-sizes-map {
      &--#{$modifier} {
        @include square-size($size);
      }
    }
  }

  &--clickable {
    cursor: pointer;

    &:hover {
      opacity: 0.9;
    }
  }

  @each $modifier, $size in $avatar-sizes-map {
    &--#{$modifier},
    &--#{$modifier} img {
      @include square-size($size);
    }
  }
}