.js-post-comments {
  margin: var(--post-comments-margin);
}

.js-post-comments:not(.js-empty) {
  .comments-list-controls {
    margin-left: var(--comment-votes-width);
  }
}

.js-comments-list {
  margin: var(--comments-list-margin);
}

.js-comment {
  display: flex;
}

.comment-votes {
  width: var(--comment-votes-width);
  min-width: var(--comment-votes-width);
}

.js-comment-content {
  width: 100%;
}

.js-comments-list-title {
  margin: var(--comments-list-title-margin);
  font-size: var(--comments-list-title-font-size);
}

.js-comments-list .js-comment {
  margin: var(--comment-margin);
}

.js-comment-controls {
  .js-avatar-box {
    vertical-align: middle;
    margin-right: 0.125rem;
  }
  .js-avatar {
    height: var(--comment-avatar-size);
    width: var(--comment-avatar-size);
  }
  .action-link::before {
    font-size: var(--post-controls-icon-size);
    margin: var(--post-controls-icon-margin);
  }
}

.js-comment .js-post-upvote-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--comment-votes-font-size);
  &::before {
    font-size: 0.75rem;
    color: var(--comment-upvote-btn-color);
    transition: color var(--transition-params);
    padding: var(--comment-upvote-btn-icon-padding);
  }
  &.js-active {
    color: var(--comment-upvote-active-btn-color);
    transition: color var(--transition-params);
  }
  &.js-active::before {
    color: var(--comment-upvote-active-btn-color);
    transition: color var(--transition-params);
    &:hover {
      color: var(--comment-upvote-active-btn-hover-color);
      transition: color var(--transition-params);
    }
  }
}

body:not(.anon) .js-comment .js-post-upvote-btn {
  cursor: pointer;
  &:hover::before {
    color: var(--comment-upvote-btn-hover-color);
    transition: color var(--transition-params);
  }
  &.js-active::before:hover {
    color: var(--comment-upvote-active-btn-hover-color);
    transition: color var(--transition-params);
  }
}

form.repost-comment-as-answer {
  display: inline-block;
}

.js-comment-edit-btn {
  margin-right: 0.125rem;
}

.js-comment-author {
  text-decoration: none;
}

.js-post-comment-form {
  padding-left: var(--comment-votes-width);
  position: relative;
  margin: 0.75rem 0;
  .bent-arrow {
    position: absolute;
    left: 0.5rem;
    top: 1.45rem;
  }
  .js-simple-editor {
    display: flex;
  }
  textarea {
    border-radius: var(--border-radius);
    margin-bottom: 0.25rem;
    outline: none;
    width: 100%;
  }
}

.js-edit-comment-controls {
  margin-bottom: 0.5rem;
  .btn {
    margin-right: 0.5rem;
  }
}

.js-minor-edit {
  align-items: center;
  display: flex;
  margin-top: 0.25rem;
  > :first-child {
    margin-right: 0.25rem;
  }
}

.js-comment-length-counter {
  transition: color var(--transition-params);
}

.js-comment-length-counter-too-short,
.js-comment-length-counter-too-long {
  color: var(--clr-danger);
}

.js-comment-length-counter-almost-too-long {
  color: var(--clr-orange);
}
