:global {
  .monaco-editor {
    &.inline-comment {
      .margin-view-overlays {
        .codicon-folding-expanded,
        .codicon-folding-collapsed {
          margin-left: 11px;
        }
      }
      .dirty-diff-glyph {
        margin-left: 25px;
      }
    }

    .avatar-icon {
      background-position: left;
    }

    .comment-thread-range {
      background-color: var(--editorCommentsWidget-rangeBackground);
    }

    .comment-thread-range-current {
      background-color: var(--editorCommentsWidget-rangeActiveBackground);
    }

    .cldr.insert-sign,
    .cldr.delete-sign {
      background-position: right;
    }

    .comment-diff-added {
      border-left-color: var(--editorGutter-commentRangeForeground);
      border-left-style: solid;
      border-left-width: 3px;
    }

    .comment-range {
      margin-left: 10px;
      width: 4px !important;
      cursor: pointer;
      z-index: 10;

      &.multiline-add {
        border-left-color: var(--peekView-border);
        border-left-width: 3px;
        border-left-style: solid;
        height: 100%;
      }
      &.comment-thread::before {
        border-radius: 3px;
        width: 18px !important;
        padding-left: 1px;
        background: var(--editorGutter-commentRangeForeground);
        color: var(--editorGutter-commentGlyphForeground);
        align-items: center;
        display: flex;
        flex-direction: row;
        height: 100%;
        justify-content: center;
        left: -8px;
        position: absolute;
        text-align: center;
        z-index: 10;
        font-size: 12px;
      }

      &.line-hover:before {
        content: '\ea60';
        font-family: 'codicon';
        border-radius: 3px;
        width: 18px !important;
        padding-left: 1px;
        background: var(--editorGutter-commentRangeForeground);
        color: var(--editorGutter-commentGlyphForeground);
        align-items: center;
        display: flex;
        flex-direction: row;
        height: 100%;
        justify-content: center;
        left: -8px;
        position: absolute;
        text-align: center;
        z-index: 10;
      }
    }

    .comment-add,
    .comment-thread {
      z-index: 11;
    }
  }
}

.comment_container {
  font-size: 12px;
  background-color: var(--peekViewResult-background);
  border-top: 1px solid var(--peekView-border);
  border-bottom: 1px solid var(--peekView-border);
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  line-height: 22px;
  padding: 0 2px 0 14px;
  border-bottom: 1px solid var(--kt-tab-borderDown);
}

.review_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title_actions {
  display: flex;
}

.comment_body {
  padding: 18px;
}

.comment_shadow_box {
  padding: 8px 0;
}

.comment_bottom_actions {
  margin-top: 12px;
}

.reply_item_title {
  visibility: hidden;
  display: inline-block;
  margin-left: 8px;
}

.textarea_container {
  background-color: var(--input-background);
  padding: 4px 16px;
  border-radius: 2px;
}

.mention {
  width: 100%;
}

.textarea_preview {
  min-height: 56px;
}

.comment_reply_actions {
  justify-content: flex-start;
}

.comment_item {
  display: flex;
}

.comment_item_content {
  flex: 1;
}

.comment_item_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.comment_item_author {
  display: flex;
}

.comment_item_name {
  display: flex;
  align-items: center;
}

.comment_item_author_name {
  line-height: 20px;
  color: var(--descriptionForeground);
}

.comment_item_timestamp {
  margin-left: 2px;
  line-height: 20px;
  color: var(--descriptionForeground);
}

.comment_item_markdown_header {
  display: flex;
  justify-content: space-between;
}

.comment_item_label {
  margin-left: 5px;
  color: var(--descriptionForeground);
}

.comment_item_icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
}

.reply_item {
  margin-bottom: 8px;

  &:last-child {
    margin-bottom: 0;
  }

  &:hover {
    .reply_item_title {
      visibility: visible;
    }
  }
}

.reply_item_icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 8px;
}

.comment_item_actions {
  display: flex;
}

.comment_item_reply_button {
  margin: 0 6px;
}

.comment_item_reply_wrap {
  margin-top: 4px;
  padding: 14px 12px;
  background: var(--kt-popover-prominentBackground);
  border-radius: 2px;
}

.comment_item_reply {
  margin-top: 12px;
}

.comment_item_context {
  margin: 12px 0;
}

.comment_panel {
  font-size: 12px;
  line-height: 22px;
  width: 100%;
  height: 100%;
}

.panel_placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--kt-panel-secondaryForeground);
}

.comment_reactions {
  margin-top: 4px;
}

.comment_reaction {
  margin-right: 4px;
}
