@import "/imports/ui/stylesheets/variables/palette";
@import "/imports/ui/stylesheets/variables/general";
@import "/imports/ui/stylesheets/mixins/_indicators";

/* Variables
 * ==========
 */
$user-avatar-border: $color-gray-light;
$user-avatar-text: $color-white;
$user-indicator-voice-bg: $color-success;
$user-indicator-muted-bg: $color-danger;
$user-list-bg: $color-off-white;
$user-color: currentColor; //picks the current color reference in the class

.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;
    z-index: 1;
  }
}

.talking {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $user-color;
  border-radius: inherit;
  animation: pulse 1s infinite ease-in;
}


@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.moderator {
  border-radius: 5px;
}

.presenter {
  &:before {
    content: "\00a0\e90b\00a0";
  }
  @include presenterIndicator();
}

.voice {
  &:after {
    content: "\00a0\e931\00a0";
    background-color: $user-indicator-voice-bg;
    top: 1.375rem;
    left: 1.375rem;
  }
}

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


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

.listenOnly, .muted, .voice {
  @include indicatorStyles();
}

.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
  }
}