@import "animations";

.commentable-section {
  position: relative;

  &:hover .side-comment .marker {
    display: block;
  }
}

.side-comment {
  * {
    box-sizing: border-box;
  }

  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  min-height: 100%;
  height: 100%;

  .hide {
    display: none;
  }
  
  .marker {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .marker span {
    display: none;
  }

  &.active .marker, &.has-comments .marker, &.has-comments ul.comments {
    display: block;
  }

  .add-comment {
    display: none;
  }

  &.has-comments .add-comment, &.no-current-user .add-comment {
    display: block;
  }

  &.no-current-user .add-comment {
    margin-top: 20px;
  }

  &.has-comments {

    .marker:before {
      content: "";
    }

    .marker span {
      display: block;
    }

    .add-comment.hide {
      display: none;
    }

    .comment-form {
      display: none;
    }

  }
  
  .comments-wrapper {
    display: none;
    position: absolute;
    top: 0;
    left: 40px;
  }

  .comments {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    width: 100%;

    li {
      width: 100%;
      overflow: hidden;
    }
  }

  .comment, .comment-box, .actions {
    margin: 0;
  }

  .actions, .delete {
    margin-left: 42px;
  }

  .add-comment.active {
    display: block;
  }

  .comment-form {
    overflow: hidden;
    
    &.active {
      display: block;
    }
  }

  &.active .comments-wrapper {
    display: block;
  }

}

@import "responsive";