@import "variables.less";
@import "mixins.less";

.taskCommentsAndChanges {
  .taskComments {
    .addCommentBtn {
      .uiIconTaskAddComment {
        position: relative;
        cursor: pointer;
        margin-top: 2px;
        .fa-comment-medical();
        &:before {
          .fa();
          font-size: 16px;
          color: @primaryColor;
        }
        &:hover {
          &:before {
            color: @primaryColor
          }
        }
      }
    }
    .lastCommentLabel {
      font-size: 16px;
      color: @greyColorLighten1;
    }
    .ViewAllCommentLabel {
      font-size: 16px;
      color: @primaryColor;
      text-decoration: underline;
      cursor: pointer;
    }
    .comment{
      position: relative;
    }
    .commentItem {
      width: 100%;
      .commentHeader {
        width: 100%;
        .removeCommentBtn {
          margin-left: auto ~'; /** orientation=lt */ ';
          margin-right: auto ~'; /** orientation=rt */ ';
          margin-top: -4px;
          .deleteComment {
            right: 0;
            top:0;
          }
        }
        .externalTagClass {
          color: @baseColorLight;
          font-weight: normal;
        }
      }
      .commentBody {
        display: inline-block;
        .taskContentComment {
          background: @commentBackgroundColor;
          padding: 10px;
          border-radius: 10px;
          word-break: break-word;
          p {
            margin-bottom: 0!important;
          }
          .externalTagClass {
            color: @baseColorLight;
            font-weight: normal;
          }
        }
      }
    }
    .TaskSubComments{
      margin-left: -20px ~'!important; /** orientation=lt */ ';
      margin-right: -20px ~'!important; /** orientation=rt */ ';
      .TaskSubCommentItem {
        padding-left: 60px ~'; /** orientation=lt */ ';
        padding-right: 60px ~'; /** orientation=rt */ ';
      }
    }
    .taskCommentEmpty {
      .uiIconComment{
        display: block;
        margin-bottom: 10px;
        .fa-comments();
        &:before {
          .fa();
          font-style: normal;
          font-size: 34px;
          color: @greyColor;
        }
      }
      .noCommentLabel {
        display: block;
        color: @greyColorLighten1;
        font-size: 16px;
      }
      .ViewAllCommentText {
        display: block;
        text-decoration: underline;
        color: @primaryColor;
        font-size: @textFontSize;
        cursor: pointer;
      }
    }
  }
  .commentBtn {
    background-color: @primaryColor!important;
    letter-spacing: 0!important;
    font-size: @textFontSize!important;
    text-transform: capitalize;
  }
}

.taskCommentDrawer {
  .addCommentBtn {
    .uiIconTaskAddComment {
      position: relative;
      cursor: pointer;
      top: 0px;
      .fa-comment-medical();
      &:before {
        .fa();
        font-size: 18px;
        color: @primaryColor;
      }
      &:hover {
        &:before {
          color: @primaryColor
        }
      }
    }
  }
  .drawerTitle > * {
    flex: 0 0 auto!important;
  }
  .drawerHeader {
    .v-list-item__content {
      padding: 0 !important;
    }
  }
  .uiArrowBAckIcon {
    cursor: pointer;
    color: @btnDisableColor!important;
    margin-bottom: 0 !important;
    &:before {
      font-style: normal;
      font-size: 18px;
    }
  }
  .drawerContent {
    padding: 8px;
    .dateTime.caption {
      color: @greyColorLighten1;
      text-align: start;
      padding-left: 10px ~'; /** orientation=lt */ ';
      padding-right: 10px ~'; /** orientation=rt */ ';
    }
    .TaskCommentContent {
      .commentItem {
        width: 100%;
        .commentHeader {
          width: 100%;
          .removeCommentBtn {
            margin-left: auto ~'; /** orientation=lt */ ';
            margin-right: auto ~'; /** orientation=rt */ ';
            .deleteComment {
              right: 0;
              top:0;
              .uiIconTrashMini {
                font-size: 12px;
              }
            }
          }
          .externalTagClass {
            color: @baseColorLight;
            font-weight: normal;
          }
        }
        .commentBody {
          display: inline-block;
          .taskContentComment {
            background: @commentBackgroundColor;
            padding: 10px;
            border-radius: 10px;
            word-break: break-word;
            p {
              margin-bottom: 0!important;
            }
            .externalTagClass {
              color: @baseColorLight;
              font-weight: normal;
            }
          }
        }
      }
      .TaskSubComments{
        margin-left: -20px ~'!important; /** orientation=lt */ ';
        margin-right: -20px ~'!important; /** orientation=rt */ ';
        .TaskSubCommentItem {
          padding-left: 60px ~'; /** orientation=lt */ ';
          padding-right: 60px ~'; /** orientation=rt */ ';
        }
      }
      .commentEditorContainer {
        padding-left: 40px ~'; /** orientation=lt */ ';
        padding-right: 40px ~'; /** orientation=rt */ ';
      }
      .newCommentEditor {
        padding-left: 0 ~'; /** orientation=lt */ ';
        padding-right: 0 ~'; /** orientation=rt */ ';
      }
    }
    .editorContent {
      .inactiveEditor {
        display: none !important;
      }
      .comment {
        position: relative;
        .editorContainer {
          width: 100%;
        }
      }
    }
    .changeUserAvatar {
      .pull-left.ml-2.d-flex.flex-column {
        align-self: flex-start;
        margin-top: -5px;
        p {
          font-weight: bold;
          color: @primaryColor !important;
        }
      }
    }
    .changesText {
      max-width: 270px;
    }
  }
}

.taskContentComment {
  blockquote {
    margin: 10px 0 7px 20px ~'; /** orientation=lt */ ';
    margin: 10px 20px 7px 0 ~'; /** orientation=rt */ ';
    background: @baseBackground;
    border-left: 5px solid @primaryColor ~'!important; /** orientation=lt */ ';
    border-right: 5px solid @primaryColor ~'!important; /** orientation=rt */ ';
    padding: 10px;

    p, ul li, ol li {
      margin-bottom: 0;
      font-size: @textFontSize;
      font-weight: @textFontWeight;
      font-style: @textFontStyle;
      color: @textColor;
      line-height: 1.25;
    }
  }
}
