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

/* Variables
 * ==========
 */
:root {
  --user-avatar-border: var(--color-gray-light);
  --user-avatar-text: var(--color-white);
  --user-indicator-voice-bg: var(--color-success);
  --user-indicator-muted-bg: var(--color-danger);
  --user-list-bg: var(--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: calc(var(--enableAnimation) * .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: var(--user-indicators-offset);
    right: var(--user-indicators-offset);
    border: 1.5px solid var(--user-list-bg);
    border-radius: 50%;
    background-color: var(--user-indicator-voice-bg);
    color: var(--user-avatar-text);
    opacity: 0;
    transition: calc(var(--enableAnimation) * .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: var(--user-color);
  border-radius: inherit;
  animation: pulse calc(var(--enableAnimation) * 1s) infinite ease-in;
}


[style~="--enableAnimation:0;"] .talking::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--user-color);
  border-radius: inherit;
  box-shadow: 0px 0px 0px 4px var(--user-color);
  opacity: .5;
}


@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: var(--user-indicator-voice-bg);
    top: 1.375rem;
    left: 1.375rem;
  }
}

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


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

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

.content {
  color: var(--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
  }
}