sparkletown/sparkle

@import "scss/constants.scss";

$avatarUrl: var(--user-profile-picture-avatar-url, none);
$icon-dimensions: 100px;

.UserProfilePicture {
  width: $avatarSize;
  height: $avatarSize;
  min-width: $avatarSize;
  min-height: $avatarSize;

  background-image: $avatarUrl;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  border-radius: 10rem;

  cursor: pointer;

  &--only-icon {
    @include square-size($icon-dimensions);
    bottom: 0;
    left: 0;
    margin: $spacing--sm auto;
  }

  // Note: this is only needed to pass down to UserAvatar, if we go back to using the
  // direct styles above to render the image within this component, then this won't be needed anymore.
  &__avatar {
    width: 100%;
    height: 100%;
  }
}