/**
 * Comments Wrapper
 */
.comments-area {

  max-width: var(--responsive--aligndefault-width);
  margin-left: auto;
  margin-right: auto;

  @include media(mobile) {
    max-width: var(--responsive--aligndefault-width-post);
  }

  margin-top: 120px;


  > * {
    margin-top: var(--global--spacing-vertical);
    margin-bottom: var(--global--spacing-vertical);

    &:first-child {
      margin-top: 0;
    }

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

  &.show-avatars {

    .avatar {
      border-radius: 50%;
      position: absolute;
      top: 10px;
    }

    .fn {
      display: inline-block;
      padding-left: 75px;
    }

    .comment-metadata {
      padding: 8px 0 10px 75px;
    }

  }

  /**
* Comment Title
*/

  .comments-title,
  .comment-reply-title {
    font-size: var(--heading--font-size-h4);
    letter-spacing: var(--heading--letter-spacing-h2);
  }

  .comments-title {
    margin: 50px 0 38px 0;
  }

  a {

    @include link-style();

  }
}


.comment-reply-title {
  display: flex;
  justify-content: space-between;

  small {

    a {
      @include button-style-simple();
    }
  }
}

/* Nested comment reply title*/
.comment .comment-respond .comment-reply-title {
  font-size: var(--global--font-size-lg);
}

/**
 * Comment Lists
 */
.comment-list {
  padding-left: 0;
  list-style: none;

  > li {
    margin-top: var(--global--spacing-vertical);
    margin-bottom: var(--global--spacing-vertical);
  }

}

.comment-list .children {
  list-style: none;
  padding-left: 0;

  > li {
    margin-top: var(--global--spacing-vertical);
    margin-bottom: var(--global--spacing-vertical);
  }

}

.comment-list .depth-2,
.comment-list .depth-3 {
  @include media(mobile) {
    padding-left: calc(4 * var(--global--spacing-horizontal));
  }
}

/**
 * Comment Meta
 */
.comment-meta {

  position: relative;
  margin: 0 0 16px 0;

  .comment-author {
    line-height: var(--global--line-height-heading);
    margin-bottom: calc(0.25 * var(--global--spacing-unit));

    @include media(mobile) {
      margin-bottom: 0;
      padding-right: 0;
    }

    .fn {
      font-family: var(--global--font-primary);
      font-weight: 700;
      font-size: 1.5rem;
      hyphens: auto;
      word-wrap: break-word;
      word-break: break-word;
    }

  }

  .comment-metadata {
    color: var(--global--color-text-lighten);
    font-size: var(--global--font-size-xs);
    padding: 8px 0 9px 0;

    a {
      color: var(--global--color-text-lighten);
    }

    .edit-link {
      margin-left: var(--global--spacing-horizontal);
    }

  }

  @include media(mobile) {
    margin-right: inherit;

    .comment-author {
      max-width: inherit;
    }
  }
}

.reply {
  font-size: var(--global--font-size-sm);
  line-height: var(--global--line-height-heading);
}

.bypostauthor {
  display: block;
}

.says {
  display: none;
}

.pingback .url,
.trackback .url {
  font-family: var(--global--font-primary);
}

// Comment body
.comment-body {
  position: relative;
  margin-bottom: var(--global--spacing-vertical);
  padding: 40px 50px;
  border: 1px solid var(--global--color-gray-darken);


  .reply {
    margin: 0;
    text-align: right;
  }

  .comment-reply-link {
    @include button-style-simple();
  }


}

.comment-content a {
  word-wrap: break-word;
}

// Pingbacks & Trackbacks
.pingback .comment-body,
.trackback .comment-body {
  margin-top: var(--global--spacing-vertical);
  margin-bottom: var(--global--spacing-vertical);
}

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

.comment-respond > * {
  margin-top: var(--global--spacing-unit);
  margin-bottom: var(--global--spacing-unit);

  &:first-child {
    margin-top: 0;
  }

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

    &.comment-form {
      margin-bottom: var(--global--spacing-vertical);
    }
  }
}

.comment-author {
  padding-top: 3px;

  .url {
    color: currentColor;
  }
}

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

  > * {
    flex-basis: 100%;
  }


  .comment-notes {
    font-size: var(--global--font-size-sm);
  }

  .comment-form-url,
  .comment-form-comment {
    width: 100%;
  }

  .comment-form-author,
  .comment-form-email {
    flex-basis: 0;
    flex-grow: 1;

    @include media(mobile-only) {
      flex-basis: 100%;
    }
  }

  .comment-form-cookies-consent > label,
  .comment-notes {
    font-size: var(--global--font-size-xs);
    font-weight: normal;
  }
}

.comment-form > p {
  margin-bottom: var(--global--spacing-unit);

  &:first-of-type {
    margin-top: 0;
  }

  &:last-of-type {
    margin-bottom: 0;
  }

  label,
  input[type="email"],
  input[type="text"],
  input[type="url"],
  textarea {
    display: block;
    font-size: var(--global--font-size-sm);
    margin-bottom: calc(.5 * var(--global--spacing-unit));
    width: 100%;
    font-weight: var(--form--label-weight);
  }

  label {
    margin-bottom: 10px;
  }

  input[type="checkbox"] {
    margin-top: 1px;
  }

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

  @include media(mobile) {

    &.comment-form-author {
      margin-right: calc(1.5 * var(--global--spacing-horizontal));
    }

    &.comment-notes,
    &.logged-in-as {
      display: block;
    }
  }
}