@import "./messages/reactions";

@mixin channel-messages {
  .wcMessages {
    margin: 0;
    -webkit-overflow-scrolling: touch;

    .wcMessage {
      margin: 3px 0 3px 0;
      position: relative;

      .wcTime {
        > * {
          font-size: 0.9em;
        }
      }

      .wcRowHead {
        .wcUser {
          margin-right: 5px;
          line-height: 1em;
          box-shadow: none;
        }
        a.wcUser:hover {
          text-decoration: underline;
        }
        .wcTime {
          color: #a6a6a6;
          .wcMessageTimeDate {
            margin-right: 3px;
          }
        }
      }
      &.wcCurrentUser {
        .wcRowHead {
          .wcUser {
            font-weight: bold;
          }
        }
      }

      &.wcAwaitingApproval {
        background-color: rgba(255, 0, 4, 0.07);
        border: 1px solid rgba(255, 0, 4, 0.17);
      }

      .wcRowBody {
        display: flex;
        align-items: flex-start;

        .wcAvatar {
          flex-shrink: 0;
          border-radius: 50%;
          box-shadow: 0 0 5px inset rgba(0,0,0,0.2);
          max-width: 45px;
        }

        .wcContent {
          flex-grow: 1;
          min-width: 100px; /* overflow fix */
          overflow-wrap: break-word;
          word-wrap: break-word;
          -ms-word-break: break-all;
          -ms-hyphens: auto;
          -moz-hyphens: auto;
          -webkit-hyphens: auto;
          hyphens: auto;
          background: #f7f7f7;
          padding: 10px;
          line-height: 1.3;
          position: relative;

          .wcImage, .wcEmoticon {
            max-height: 55px;
            max-width: 55px;
            border-radius: 5px;
            box-shadow: none;
            border: none;
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 4px;

            &.wcTenorGIF {
              max-height: 140px;
              max-width: 140px;
            }
          }
          .wcEmoticon {
            max-height: initial;
            max-width: initial;
          }
          video {
            max-width: 100%;
          }
          .wcInternalContent {
            word-break: break-word;
          }
          &.wcEditing {
            .wcInternalContent {
              display: none;
            }
            .wcInternalEditing {
              border: 1px dashed rgba(0, 193, 121, 1);
              outline: 0 solid transparent;
            }
          }
          &:not(.wcEditing) {
            .wcInternalEditing {
              display: none;
            }
          }

          .wcQuote {
            background-color: #ebebeb;
            border-left: 4px solid #dfdfdf;
            padding: 5px;
            margin-bottom: 2px;

            .wcQuoteHead {
              display: flex;
              align-items: center;
              margin-bottom: 2px;
              flex-wrap: wrap;

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

              .wcUser, .wcQuoteContent, span.wcTime {
                font-size: 0.8em;
                line-height: 1em;
              }

              .wcAvatar {
                max-width: 1em;
              }
              .wcTime {
                color: #a6a6a6;
                .wcMessageTimeDate { margin-right: 5px; }
              }
            }
          }

          .wcEditTools {
            text-align: right;
            padding: 2px;
            a {
              padding: 0;
              width: 20px;
              height: 20px;
              display: inline-block;
              text-decoration: none;
              border: 1px solid #A6A6A6;
              border-radius: 50%;
              transition: all .2s ease-in;
              font-size: 0.9%;
              margin-left: 2px;
            }
            .wcCancelButton {
              background: rgba(244,31,31,0.15) url(../../gfx/icons/x.svg) no-repeat center center;
              border-color: rgba(244,31,31,0.2);
              &:hover {
                border-color: rgba(244,31,31,0.7);
              }
            }
            .wcSaveButton {
              background: rgba(0,193,121,0.15) url(../../gfx/icons/approve.svg) no-repeat center center;
              border-color: rgba(0,193,121,0.2);
              &:hover {
                border-color: rgba(0,193,121,0.7);
              }
            }
          }

          .wcActionsButton {
            position: absolute;
            right: 5px;
            top: 5px;
            padding: 5px;
            box-shadow: 2px 2px 2px rgba(60,60,60,.03);
            border: 1px solid #e1e1e1;
            display: none;
            align-items: center;
            z-index: 1;
            width: 20px;
            height: 20px;
            background: #efefef url(../../gfx/icons/3dots.svg) center center no-repeat;
            background-size: 14px;

            &:hover {
              border: 1px solid #dadada;
            }

            &.wcActionsButtonVisible {
              display: block;
            }
          }

          @include reactions;
        }
      }
    }
  }
}