.comment {
  padding-left: 10px;
  border-left: 10px solid $frame-color-back;

  .comment {
    border-left: 5px solid $frame-color-back;

    .comment {
      .comment {
        margin-left: -15px;
      }
    }
  }

  h5 {
    font-size: $base-font-size;
    font-weight: medium;
    font-family: $caption-font-family;

    .comment-meta {
      font-size: 80%;
      font-family: $compact-font-family;
      color: $frame-color-dark;
    }

    a,
    a:link,
    a:visited {
      color: $frame-color-dark;
    }
  }
}

.comment.loaded {
  border-color: #fff8dc;
}

.comment-message {
  h1,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: $base-font-size;
    font-weight: normal;
    font-family: $caption-font-family;
  }
}

.comment-actions {
  font-size: 80%;
  font-family: $compact-font-family;
  color: $frame-color-dark;

  a,
  a:link,
  a:visited {
    color: $frame-color-dark;
  }

  display: none;
}

#add-comment {
  @extend h3;
}

#add-comment-form {
  display: grid;

  background-color: $frame-color-back;
  padding: 10px;
  border: solid $frame-color-light 1px;
  box-shadow: $base-shadow $frame-color-light;
  border-radius: 5px;

  grid-template-columns: 200px 250px 1fr 130px 110px;
  gap: 10px;

  grid-template-areas:
    "target      target      target     target     target"
    "name-label  name-input  .          .          ."
    "email-label email-input site-label site-input site-input"
    "msg-label   message     message    message    message"
    "msg-hint    message     message    message    message"
    ".           message     message    message    message"
    "recaptcha   recaptcha   recaptcha  recaptcha  button"
    "recaptcha   recaptcha   recaptcha  recaptcha  .";

  @media screen and (max-width: 824px) and (min-width: 640px) {
    grid-template-columns: 200px 250px 1fr 110px;
    grid-template-areas:
      "target      target      target    target"
      "name-label  name-input  .         ."
      "email-label email-input .         ."
      "site-label  site-input  .         ."
      "msg-label   message     message   message"
      "msg-hint    message     message   message"
      ".           message     message   message"
      "recaptcha   recaptcha   recaptcha button"
      "recaptcha   recaptcha   recaptcha .";
  }

  @media screen and (max-width: 639px) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "target"
      "name-label"
      "name-input"
      "email-label"
      "email-input"
      "site-label"
      "site-input"
      "msg-label"
      "message"
      "msg-hint"
      "recaptcha"
      "button";
  }
}

#add-comment-target {
  grid-area: target;

  text-align: center;
  font-size: $small-font-size;
  font-family: $compact-font-family;
}

#add-comment-name-label {
  grid-area: name-label;

  text-align: right;
  font-weight: bold;
  margin: auto 0px;

  @media screen and (max-width: 639px) {
    text-align: left;
  }
}

#add-comment-name-input {
  grid-area: name-input;
}

#add-comment-email-label {
  grid-area: email-label;

  text-align: right;
  margin: auto 0px;

  @media screen and (max-width: 639px) {
    text-align: left;
  }
}

#add-comment-email-input {
  grid-area: email-input;
}

#add-comment-site-label {
  grid-area: site-label;

  text-align: right;
  margin: auto 0px;

  @media screen and (max-width: 639px) {
    text-align: left;
  }
}

#add-comment-site-input {
  grid-area: site-input;
}

#add-comment-msg-label {
  grid-area: msg-label;

  text-align: right;
  font-weight: bold;
  margin: auto 0px;

  @media screen and (max-width: 639px) {
    text-align: left;
  }
}

#add-comment-msg-hint {
  grid-area: msg-hint;

  text-align: right;
  font-size: $notes-font-size;
  hyphens: manual;

  @media screen and (max-width: 639px) {
    text-align: left;
  }
}

#add-comment-message {
  grid-area: message;
}

#add-comment-recaptcha {
  grid-area: recaptcha;

  p {
    text-align: left;
    font-size: $notes-font-size;
    hyphens: manual;
  }
}

.g-recaptcha {
  float: right;
  width: 300px;
  margin-left: 10px;

  @media screen and (max-width: 659px) {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

#add-comment-button {
  grid-area: button;

  font-weight: bold;

  height: 78px;
}

#add-comment,
#add-comment-form,
.comment-actions-wrapper {
  @media print {
    display: none;
  }
}

$indents: 1, 2, 4, 8, 12;

@each $i in $indents {
  .i#{$i} {
    margin-left: #{$i}em;
  }
}

.giscus {
  @media print {
    display: none;
  }
}