// Comments
//
// WordPress built-in comments with comment_form().
// Custom comment template can be found in inc/comments.php
/* stylelint-disable no-descending-specificity */
.comments-area {
  margin-bottom: 0;
  margin-top: 50px;
  overflow: visible;
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    font-size: var(--font-size-tiny);
    margin-bottom: 70px;
    margin-top: 0;
    padding: 0;
  }

  p {
    color: $color-darkgrey;
    font-size: var(--font-size-tiny);
  }

  .avatar {
    border-radius: 50%;
    float: right;
  }

  .comment-author {
    @extend %h4;
    color: $color-paragraphs;
    margin-bottom: 10px;
    margin-top: 0;
    padding: 0;
  }

  a,
  .comments-link a {
    box-shadow: none;
    color: $color-comments-link;
  }

  .comment-author a {
    color: $color-paragraphs;
  }

  .comment-time {
    font-size: var(--font-size-tiny);
    margin: 0;
    padding: 0;

    a {
      color: $color-darkgrey;
    }

    &:focus,
    &:hover {
      opacity: 1;
    }
  }

  .comment-time svg {
    fill: $color-darkgrey;
    margin-right: 5px;
    position: relative;
    top: 2px;
  }
}

.comments-link {
  align-items: center;
  display: inline-flex;
  font-size: var(--font-size-tiny);
  text-align: right;

  a {
    color: $color-comments-link;
  }

  &:hover,
  &:focus,
  a:hover,
  a:focus {
    color: $color-black;
  }

  svg {
    margin-right: 7px;
    position: relative;
    top: -1px;
  }
}

// Comment form grid
.comment-form {
  @media (min-width: $container-mobile) {
    display: grid;
    grid-column-gap: 1em;
    grid-template-columns: 1fr 1fr;

    /* autoprefixer: off */
    justify-content: center;

    // Make these full width
    .comment-notes,
    .comment-form-comment,
    .form-submit {
      grid-column: 1 / span 2;
    }
  }
}

.comment-respond {
  margin-bottom: 0;
  overflow: visible;

  input {
    @media (max-width: $container-mobile) {
      width: 100%;
    }
  }

  .comment-form-author {
    margin-bottom: 20px;
    margin-top: 0;

    input {
      border-width: 1px;
      padding: 15px;
      width: 100%;
    }
  }

  .comment-form-email {
    clear: right;
    margin-bottom: 20px;
    margin-right: 0;
    margin-top: 0;

    input {
      border-width: 1px;
      padding: 15px;
      width: 100%;
    }
  }

  .comment-form-url {
    margin-bottom: 30px;
    margin-top: 0;
    position: relative;

    input {
      border-width: 1px;
      padding: 15px;
      width: 100%;
    }
  }

  .form-submit {
    clear: both;
    display: block;
    margin-bottom: 0;
    margin-top: 0;
  }

  .comment-form-comment {
    margin-bottom: 20px;
  }

  textarea {
    width: 100%;
  }
}
/* stylelint-enable no-descending-specificity */