@participantsToggleColor: #4d5466;

/* list participants area */
.room-users-collapse-btn {
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  .square-rounded(23px);
  border: @defaultBorder;
  text-align: center;
  cursor: pointer;
  display: none;
  
  .uiIcon {
    top: 2px;
    color: @secondaryIconColor;
    &:before {
      content: "\e903"
    }
  }
}
.room-participants.collapsed {
  background-color: @tertiaryIconColor;
}
.room-participants:hover .room-users-collapse-btn {
  display: block;
}
.room-participants-header {
  .flex-center;
  justify-content: center;
  flex-shrink: 0;
  height: @listHeaderHeight;
  border-bottom: @defaultBorder;
  padding: @defaultPadding;
}
.room-participants-list {
  padding: 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: @scrollSize;
  }
  &::-webkit-scrollbar-thumb {
    background: @scrollDefaultThumbColor;
    border-radius: @scrollThumbRaduis;
  }
}
.room-participants-title {
  margin-right: auto;
  font-weight: bold;
  text-transform: uppercase;
}
.room-participants-filter .actionIcon {
  border: @defaultBorder;
   .uiIconChatMember {
    top: 2px;
    &.all-participants {
      color: @participantsToggleColor;
    }
  }
}

.collapsed {
  .room-participants-list {
    align-items: center;
    .chat-contact .contactLabel {
      display: none;
    }
  }
  .room-users-collapse-btn .uiIcon:before{
    content: "\e901"
  }
}
/* list participants area */
