@import './apps/commudle-admin/src/assets/styles/variables';

.user-streams {
  height: calc(100% - 56px);
  position: relative;
  width: 100%;

  .user-videos {
    height: 100%;
    width: 100%;

    .user-video {
      border-radius: 10px;
      overflow: hidden;
    }
  }

  &.screen-share {
    .user-screen-share {
      height: 100%;
      width: 80%;
    }

    .user-videos {
      align-content: center;
      height: 100%;
      overflow-y: auto;
      width: 20%;

      .user-video {
        height: 25%;
        width: 100%;
      }
    }
  }

  &.one {
    .user-video {
      height: 100%;
      width: 100%;
    }
  }

  &.two {
    .user-video {
      height: 100%;
      width: 50%;
    }
  }

  &.three {
    .user-video {
      height: 50%;
      width: 50%;
    }
  }

  &.four {
    .user-video {
      height: 50%;
      width: calc(100% / 3);
    }
  }

  &.five {
    .user-video {
      height: calc(100% / 3);
      width: calc(100% / 3);
    }
  }

  &.six {
    .user-video {
      height: calc(100% / 3);
      width: 25%;
    }
  }

  &.seven {
    .user-video {
      height: 25%;
      width: 25%;
    }
  }

  &.default {
    overflow-y: scroll;

    .user-video {
      height: 25%;
      width: 25%;
    }
  }
}

.no-users {
  left: 50%;
  position: absolute;
  top: $space-16;
  transform: translateX(-50%);
}

.hand-raised {
  bottom: $space-24;
  left: $space-16;
  position: absolute;
}
