#comments {
  border-top: $muted-border;
  margin-top: $spacing-xs;

  ol {
    list-style: none;

    > ol {
      padding-left: $spacing-xs;
    }
  }

  li {
    padding: $spacing-xs 0 0;
  }

  .children > li {
    margin-top: $spacing-sm;
    padding-top: $spacing-sm;
  }

  .edit-reply {
    margin-top: $spacing-sm;
    display: flex;
    justify-content: space-between;
    font-size: .85em;

    .nv-reply-link {
      margin-left: auto;
    }
  }
}

.nv-comments-list {
  padding-bottom: $spacing-sm;
}

.nv-comments-title-wrap {
  margin: $spacing 0 $spacing-lg;
}

.nv-comment-article {
  padding-bottom: $spacing-sm;
  border-bottom: $muted-border;
}

.nv-comment-header {
  display: flex;
  align-items: center;
  text-transform: none;
  font-style: normal;
  font-size: .85em;
  margin-bottom: $spacing-sm;

  .comment-author {
    display: flex;
    flex-direction: column;
  }
}

.nv-comment-avatar {
  margin-right: $spacing-sm;

  > img {
    float: left;
    border-radius: 50%;
  }
}

.comment-author .author {
  font-weight: 700;
  text-transform: uppercase;
}

#comments {
  input:not([type="submit"]):not([type="checkbox"]) {
    width: 100%;
  }

  textarea {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .comment-respond {
    margin: $spacing 0;
  }

  .comment-reply-title {
    small {
      float: right;
    }
  }

  input[type=submit] {
    @include button-secondary();
  }
}

.comment-form {
  display: grid;
  grid-column-gap: $spacing-sm;
  grid-row-gap: $spacing-sm;

  > p:not(.comment-notes) {
    margin-bottom: 0;
  }

  label {
    margin-bottom: $spacing-xs;
    display: inline-block;
  }

  .form-submit {
    margin-top: $spacing-xs;
  }
}

.pingback {
  border-bottom: $muted-border;

  .edit-link {
    display: block;
    font-size: .85em;
    margin-top: $spacing-sm;
  }
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;

  input {
    margin-right: $spacing-xs;
  }

  label {
    margin-bottom: 0;
  }
}

@mixin comments--tablet() {
  #comments {
    li {
      margin-top: $spacing-sm;
    }

    ol > ol {
      padding-left: $spacing-sm;
    }

    .comment-form {
      grid-template-columns: repeat(3, 1fr);

      > *:not(.comment-form-author):not(.comment-form-url):not(.comment-form-email) {
        grid-column: span 3;
      }
    }

    .form-submit {
      align-items: center;
      justify-content: flex-end;
      display: flex;
      margin-top: 0;
    }
  }
}