//
// COMMENTS
//


.comments {
  margin-top: 60px;
}

.comments__list {
  margin: 30px 0;
  padding-bottom: 30px;
  border-bottom: solid 1px @co-border;
}

li.comment,
li.pingback {
  border-top: solid 1px @co-border;
  padding-top: 30px;

  + li.comment,
  + li.pingback {
    margin-top: 30px;
  }

  .reply {
    .col;
    .col--xs--12;
    .h5;
    color: @co-text-subtle;
    text-align: right;

    a {
      display: block;
      margin-top: 30px;
    }
  }

  .children {
    margin: 30px 0 0 30px;
  }
}

li.comment {
  &.bypostauthor > .comment-body > .comment-meta .fn:after {
    content: ' ★';
    color: @co-accent;
  }

  .says {
    display: none;
  }

  .avatar {
    width: 30px !important;
    border-radius: 50%;
    display: block;
    margin-bottom: .75em;
  }

  .comment-body {
    .row;
  }

  .edit-link {
    display: block;
  }
}

li.pingback {
  font-size: 12px;
  color: @co-text-subtle;

  a {
    color: @co-text-subtle;
  }
}

.comment-meta {
  .col;
  .col--xs--12;
  .col--sm--4;
  color: @co-text-subtle;
  font-size: 14px;

  a {
    color: @co-text-subtle;
  }
}

.comment-metadata {
  font-size: 12px;
}

.comment-content {
  .col;
  .col--xs--12;
  .col--sm--8;
  .rich-text();
}

.comment-respond {
  margin-top: 30px;
}


// RESPOND

.replies-wrapper + .comment-respond {
  margin-top: 90px;
}

.comment-respond {
  margin-top: 60px;

  .comment-form > * {
    margin-top: 30px;
  }

  .logged-in-as {
    color: @co-text-subtle;

    a {
      color: @co-text;
    }
  }

  #cancel-comment-reply-link {
    .h5;
    float: right;
    line-height: 2.142857143; // * 14px == 24px * 1.25
    color: @co-text-subtle;
  }
}

@media @mq-xs-max {
  .comment-content {
    margin-top: 30px;
  }
}

@media @mq-md-min {
  .comments,
  .comment-respond {
    margin-top: 90px;
  }
}
