@import "./channel-input";
@import "./channel-input-xxs";
@import "./channel-messages";
@import "./channel-stream";

@mixin channel {

  .wcChannel {
    display: flex;
    flex-direction: column;

    .wcChannelViewToolbar {
      display: none;
      justify-content: center;
      padding: 5px;

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

      .wcChannelViewButton {
        display: inline-block;
        overflow: hidden;
        transition: all .2s ease-in;
        opacity: 0.7;

        &, &:hover, &:active, &:focus {
          background-position: 50%;
          background-size: contain;
          background-repeat: no-repeat;
          background-color: transparent;
        }

        &.wcChannelViewButtonStream, &.wcChannelViewButtonStream:hover {
          background-image: url(../../gfx/icons/video-calls/video-red.svg);
          width: 30px;
          height: 25px;
        }
        &.wcChannelViewButtonChat, &.wcChannelViewButtonChat:hover {
          background-image: url(../../gfx/icons/chat.svg);
          width: 30px;
          height: 25px;
        }

        &:hover, &.wcChannelViewButtonCurrent {
          opacity: 1;
        }
      }
    }

    &.wcChannelSizeXs.wcChannelStream .wcChannelViewToolbar, &.wcChannelSizeXXs.wcChannelStream .wcChannelViewToolbar {
      display: flex;
    }

    &.wcChannelViewChat {
      .wcChannelData .wcStream {
        display: none;
      }
    }

    &.wcChannelSizeXs.wcChannelStream.wcChannelViewStream, &.wcChannelSizeXs.wcChannelViewCompound.wcChannelStream, &.wcChannelSizeXXs.wcChannelStream.wcChannelViewStream, &.wcChannelSizeXXs.wcChannelViewCompound.wcChannelStream {
      .wcChannelData .wcMessages, .wcChannelIntro, .wcChannelInput, .wcCounter {
        display: none;
      }
    }

    &.wcChannelStreamMaximized {
      .wcChannelData .wcMessages, .wcChannelIntro, .wcChannelInput, .wcCounter, .wcChannelViewToolbar {
        display: none !important;
      }
    }

    .wcChannelData {
      flex-grow: 1;
      display: grid;
      gap: 1em;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;

      @include channel-stream;
      @include channel-messages;
    }

    &.wcChannelSizeXs, &.wcChannelSizeXXs {
      .wcChannelData {
        @include channel-stream-compact;
      }
    }

    @include channel-input;
    &.wcChannelSizeXXs {
      @include channel-input-xxs;
    }

    .wcCounter {
      text-align: right;
    }

    &.wcTopInput {
      .wcChannelInput {
        order: 1;
      }

      .wcChannelData {
        order: 2;
      }
    }

    .wcChannelCoverContainer {
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .wcChannelCover {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
      }
    }

    .wcChannelIntro {
      margin-top: 5px;
      margin-bottom: 10px;
      background-color: #f7f7f7;
      border: 1px solid #f1f1f1;
      line-height: 1.2em;
      display: flex;
      flex-direction: row;

      .wcChannelIntroAvatar {
        display: flex;
        align-items: center;
        .wcAvatar {
          max-width: 80px;
          display: block;
        }
      }
      .wcChannelIntroContent {
        padding: 5px 5px 5px 13px;
      }
      .wcName {
        font-size: 1.2em;
      }
    }
  }
}