@mixin channel-stream {

  .wcStream {
    display: flex;
    flex-direction: column;
    margin-right: 1em;

    .wcStreamContent {
      position: relative;
      flex-grow: 1;

      .wcStreamInfo, .wcStreamDetails {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center; /** Y-axis align **/
        justify-content: center; /** X-axis align **/
        background-color: #444;
        border-radius: 10px;
        color: #aaa;
        padding: 7px;
        text-align: center;
      }

      .wcStreamDetails {
        text-align: center;

        .wcAvatar {
          border-radius: 5px;
          max-height: 150px;
          max-width: 150px;
        }
        .wcStreamCaller {
          font-size: 1.5em;
          color: #ffffff;
        }
      }

      video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .wcStreamToolbar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 5px;
        left: 0;
        right: 0;
        width: 100%;

        >:not(:last-child) {
          margin-right: 10px;
        }

        .wcStreamButton {
          display: inline-block;
          width: 45px;
          height: 45px;
          overflow: hidden;
          transition: all .2s ease-in;
          opacity: 0.7;
          background-position: 50%;
          background-size: 50%;
          background-repeat: no-repeat;
          border-radius: 50%;
          background-color: #999;

          &.wcStreamEnd {
            background-color: #ff0000;
            background-image: url(../../gfx/icons/video-calls/end-call.svg);
          }
          &.wcMuteAudio {
            background-image: url(../../gfx/icons/video-calls/mute-audio.svg);
            opacity: 0.5;
          }
          &.wcUnmuteAudio {
            background-image: url(../../gfx/icons/video-calls/unmute-audio.svg);
            opacity: 0.5;
          }
          &.wcMuteVideo {
            background-image: url(../../gfx/icons/video-calls/mute-video.svg);
            opacity: 0.5;
          }
          &.wcUnmuteVideo {
            background-image: url(../../gfx/icons/video-calls/unmute-video.svg);
            opacity: 0.5;
          }
          &.wcMaximizeVideo {
            background-image: url(../../gfx/icons/video-calls/maximize.svg);
            opacity: 0.5;
          }
          &.wcMinimizeVideo {
            background-image: url(../../gfx/icons/video-calls/minimize.svg);
            opacity: 0.5;
          }

          &:hover {
            opacity: 1;
          }
        }

      }
    }

  }

}

@mixin channel-stream-compact {
  .wcStream {
    margin: 5px;
  }
}