/* STAGE CALL */

// POPOUT
%stageIconBackground {
  background-color: $main-color;
}

// STAGE
%stageContainer {
  background: rgba(0, 0, 0, calc($bg-shading * 0.5));
}
%stageCallContainer,
%stageScroller {
  background-color: transparent;
}
%stageGradientContainer {
  background-image: none;
}
%stageSeparator {
  background-color: $main-color;
}
%stageParticipants {
  background-color: transparent;
}
%stageSpeakers {
  background: transparent;
}
%stageParticipant {
  background-color: cv('bg.general.card');
  &:hover {
    background-color: hsla(0, 0%, 100%, 0.05);
  }
}
%stageMessageToast {
  %stageMessageToastWrapper {
    background-color: hsla(0, 0%, 0%, 0.8);
    &:hover {
      background-color: hsla(0, 0%, 0%, 0.6);
    }
  }
}

// THE AUDIENCE CONTAINER IN VC CHANNELS
%stageVoiceUser {
  padding-top: 4px;
}
%stageVoiceUserOverlap {
  %stageVoiceUserAvatar {
    border: none;
  }
}
%stageAudienceContainer {
  background-color: hsla(0, 0%, 0%, 0.8);
  border: hsla(0, 0%, 0%, 0.8);
  %stageAudienceIconContainer {
    background: $main-color;
  }
  %stageAudienceIcon {
    color: #fff;
  }
  %textSmallMedium {
    color: rgba(255, 255, 255, 0.9) !important;
  }
}
%stageOptionContainer {
  background: rgba(0, 0, 0, calc($bg-shading * 0.3));
  &:hover {
    background: rgba(0, 0, 0, calc($bg-shading * 0.6));
  }
}
%stageLeaveButton {
  background: $main-color;
  &:hover {
    background: $hover-color;
  }
}

// ICON WHEN HOVERING SERVER
%stageGuildListenerIcon {
  background: $main-color;
  %textExtraSmallNormal {
    color: #fff !important;
  }
  > svg {
    color: #fff;
  }
}

// STARTING A STAGE CALL
%stageTopicForm {
  %input {
    background: cv('bg.general.card');
    box-shadow: 0 0 0 2px $main-color;
  }
  %stageTopicInput {
    background: transparent;
  }
}

// REQUESTS
%stageRequestContainer {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.6));
}
%stageIconBigBackground {
  background-color: $main-color;
  %stageIconBigForeground {
    color: #fff;
  }
}
