/*------------------------------------*\
  Components > Comments
\*------------------------------------*/

#comments {
  padding: double($base-spacing-unit) + half($base-spacing-unit);
  margin-top: double($base-spacing-unit) + half($base-spacing-unit);
  background: $bg-gray;

  > h4 {
    margin-bottom: $base-spacing-unit + half($base-spacing-unit);
    line-height: 1;
    text-transform: uppercase;
    font-size: $font-size-small;
    letter-spacing: double($global-letter-spacing);

    .rtl & {
      letter-spacing: unset;
    }
  }
}

.comments-title {
  padding-bottom: $base-spacing-unit;
  margin-top: $base-spacing-unit;
  margin-bottom: 0;
  border-bottom: 1px solid $color-border;
}

.comment-list {
  @extend .o-plain-list;

  margin-bottom: double($base-spacing-unit) + half($base-spacing-unit);
}

.comment-body {
  overflow: hidden;
}

.comment {
  background: $bg-white;
  padding: $base-spacing-unit + half($base-spacing-unit);
  border-radius: $global-border-radius;


  &:not(:last-child) {
    border-bottom: 1px solid $color-border;
  }

  .children {
    list-style: none;
  }

  .reply {
    margin-top: $base-spacing-unit;
    margin-left: quadruple($base-spacing-unit);
  }

  .comment-respond {
    margin-top: double($base-spacing-unit);
  }
}

.comment-meta {
  font-size: $font-size-small;
  margin-bottom: half($base-spacing-unit);
}

.comment-author {
  .avatar {
    float: left;
    position: relative;
    margin-right: $base-spacing-unit;
    width: $base-spacing-unit + double($base-spacing-unit);
    height: $base-spacing-unit + double($base-spacing-unit);
    border-radius: 100%;
    border: quarter($base-spacing-unit) solid $bg-gray;
  }

  .says {
    display: none;
  }
}

.bypostauthor .fn:after {
  content: ' ✯';
}

.comment-metadata,
.comment-metadata time,
.pingback .edit-link {
  font-size: $font-size-tiny;

  color: $color-gray;
}

.comment-metadata .edit-link,
.pingback .edit-link {
  display: inline-block;
}

.comment-content,
.pingback .comment-body {
  font-size: $font-size-medium;
}

.comment-content {
  overflow: hidden;

  p,
  ul,
  ol,
  dl {
    margin-bottom: $base-spacing-unit;
    font-size: $font-size-small;

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

.comment-form {
  display: flex;
  flex-wrap: wrap;

  label {
    display: block;
    font-size: $font-size-small;
    color: $color-gray;
  }

  .form-submit {
    margin-bottom: 0;
  }

  &-comment,
  &-url,
  &-author,
  &-email,
  .comment-form-cookies-consent,
  .form-submit {
    flex: 1 0 100%;
  }

  @include mq($from: desktop) {
    &-author {
      padding-right: $base-spacing-unit + half($base-spacing-unit);
    }

    &-author,
    &-email { flex: 1 0 50%; }
  }

  &-comment label { display: none; }
}

.comment-form-cookies-consent {
  display: flex;

  label {
    margin-left: half($base-spacing-unit);
  }
}

.form-allowed-tags {
  code { font-family: $font-monospace; }
}

.comment-reply-title {
  margin-bottom: $base-spacing-unit + half($base-spacing-unit);
  line-height: 1;
  text-transform: uppercase;
  font-size: $font-size-small;
  letter-spacing: double($global-letter-spacing);

  .rtl & {
    letter-spacing: unset;
  }

  small { float: right; }
}

.logged-in-as,
.comment-notes {
  display: none;
  font-size: $font-size-small;
}

.comment-awaiting-moderation {
  margin-top: half($base-spacing-unit);
  margin-bottom: half($base-spacing-unit);
  font-size: $font-size-small;
  font-style: italic;
  color: $color-brand;
}

.no-comments {
  margin: 0;
  padding-top: $base-spacing-unit;

 @include mq($from: desktop) {
    padding-top: $base-spacing-unit;
  }
}

.comment-navigation {
  margin-top: $base-spacing-unit;
}