@import "/imports/ui/stylesheets/variables/palette";

/* Variables
 * ==========
 */
$user-avatar-border: $color-gray-light;
$user-avatar-text: $color-white;
$user-indicators-offset: -5px;
$user-indicator-presenter-bg: $color-primary;
$user-indicator-voice-bg: $color-success;
$user-indicator-muted-bg: $color-danger;
$user-list-bg: $color-off-white;

.avatar {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  text-align: center;
  text-transform: capitalize;
  transition: .3s ease-in-out;
  font-size: .85rem;

  &:after, &:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    padding: .5rem;
    color: inherit;
    top: auto;
    left: auto;
    bottom: $user-indicators-offset;
    right: $user-indicators-offset;
    border: 1.5px solid $user-list-bg;
    border-radius: 50%;
    background-color: $user-indicator-voice-bg;
    color: $user-avatar-text;
    opacity: 0;
    transition: .3s ease-in-out;
    font-family: 'bbb-icons';
    font-size: .65rem;
    line-height: 0;
    text-align: center;
    vertical-align: middle;
    letter-spacing: -.65rem;
  }
}

.talking {
  box-shadow: 0 0 0 1px $user-list-bg, 0 0 0 3px;
}

.moderator {
  border-radius: 5px;
}

.presenter {
  &:before {
    content: "\00a0\e90b\00a0";
    opacity: 1;
    top: $user-indicators-offset;
    left: $user-indicators-offset;
    bottom: auto;
    right: auto;
    border-radius: 5px;
    background-color: $user-indicator-presenter-bg;
    padding: .425rem;
  }
}

.voice {
  &:after {
    content: "\00a0\e931\00a0";
    background-color: $user-indicator-voice-bg;
    opacity: 1;
  }
}

.muted {
  &:after {
    content: "\00a0\e932\00a0";
    background-color: $user-indicator-muted-bg;
    opacity: 1;
  }
}

.listenOnly {
  &:after {
    content: "\00a0\e90c\00a0";
    opacity: 1;
  }
}

.content {
  color: $user-avatar-text;
  top: 50%;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  font-size: 110%;
  text-transform: capitalize;

  &, & > * {
    line-height: 0; // to keep centralized vertically
  }
}