/* PRIVATE CALL */
%callWrapper {
  background: rgba(0, 0, 0, calc($bg-shading * 0.8));
  &%callMinimum {
    background: rgba(0, 0, 0, calc($bg-shading * 0.8));
  }
}
%callContainer {
  background-color: transparent;
  border-radius: 0;
}

// VIDEO STREAM
%callTile {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.7));
}
%callInviteButton {
  background-color: $main-color;
  &:hover {
    background-color: $hover-color;
  }
}
%callUserTile {
  background-color: transparent;
}/*
%callParticipantsButton {
  background-color: cv('bg.general.card');
  &:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }
}*/
%callTileBorder {
  &%callTileSpeaking {
    box-shadow: inset 0 0 0 2px $main-color;
  }
}

// WATCH STREAM
%watchStream,
%myScreenControlOptions {
  background-color: $main-color;
  &:hover {
    background-color: $hover-color;
  }
}

%myScreen {
  background: $main-color;
  border-radius: 100px;
  &:hover {
    background: $hover-color;
  }
}

%streamStillRunning {
  background-color: rgba(0, 0, 0, calc($bg-shading * 0.7));
}

// ACTION BUTTON
%callCenterButton:not(%callExperimentButton) {
  border-radius: 50%;
}
%callButtonColorable {
  &%callButtonPrimaryDark {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    &:hover {
      background-color: $hover-color;
      color: #fff;
    }
  }
  &%callButtonWhite {
    color: #fff;
    background-color: $main-color;
    &:hover {
      background-color: $hover-color;
    }
    &%callButtonActive {
      background-color: $hover-color;
      &:hover {
        background-color: $hover-color;
      }
    }
    %callCenterIcon {
      color: #fff;
      &%callButtonActive {
        color: $main-color;
      }
    }
  }
  &%callButtonRed {
    background-color: var(--danger-color);
  }
}

// new experiment BUTTONS
%callExperimentButtonSection {
  background-color: cv('bg.general.card');
}


// TEXT CHAT
%callChatWrapper {
  background: transparent;
}