/*--------------------------------------------------------------
Comments
--------------------------------------------------------------*/

// Reset list-style
ul.comment-list {
  list-style: none;
  padding: 0;

  li {
    list-style: none;
  }
}

// Avatar size
.avatar {
  width: 80px;
}

// Comment padding
.comment-list ul.children {
  padding-left: 96px;
}

@include media-breakpoint-down(lg) {
  .comment-list ul.children ul.children {
    padding-left: 0;
  }
}

@include media-breakpoint-up(lg) {
  .comment-list ul.children ul.children ul.children {
    padding-left: 0;
  }
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

#cancel-comment-reply-link {
  margin-left: $spacer * .5;
}

// Adding width to comment. When using <pre> in comment, comment-content will not crashed
.comment-content {
  width: calc(100% - 96px);

  a {
    word-wrap: break-word;
  }
}

.bypostauthor {
  display: block;
}

// Last p bottom margin in comment card
.comment-content .card p:last-child {
  margin-bottom: 0;
}

.comment-respond {
  input,
  textarea {
    border-radius: 8px;
    border: 1px solid var(--wpstream-line-color);
    background-color: var( --wpstream-comments-background-color, var(--wpstream-eerie-black) );
    padding: 10px 15px;
    color: var( --wpstream-comments-text-color, var(--bs-body-content-color) );
  }

  &.wpstream-comment-form-login {
    .comment-form-comment {
      gap: 12px;
      flex-direction: row;

      img {
        flex-shrink: 0;
        max-height: 48px;
      }

      textarea {
        width: 100%;
      }
    }
  }

  p {
    margin: unset;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
    width: 100%;

    &.comment-form-author,
    &.comment-form-email {
      @media screen and (min-width: 768px) {
        width: calc(50% - calc(1rem / 2));
      }
    }

    &.comment-form-cookies-consent {
      flex-direction: row;
      gap: 8px;
      align-items: center;
      label {
        margin-bottom: 0;
      }
    }
  }

  .comment-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    label{
      margin-bottom: 5px;
      color: var( --wpstream-comments-text-color, var(--bs-body-content-color) );
    }
  }

  .form-submit {
    flex-direction: row;

    .btn-outline {
      background: $body-color;
      background: var(--wpstream-button-color-bg);
      color: var(--wpstream-type-2-button-text-color, var(--wpstream-eerie-black));
      background: linear-gradient(
                      var(--wpstream-type-2-button-background-color-gradient-angle, 90deg),
                      var(--wpstream_type_2_button_background_color_gradient_first_color, var(--wpstream-button-color-bg)),
                      var(--wpstream_type_2_button_background_color_gradient_second_color, var(--wpstream-button-color-bg))
      );
      &:hover {
        background: linear-gradient(
                        var(--wpstream-type-2-button-hover_background-color-gradient-angle, 90deg),
                        var(--wpstream_type_2_button_hover_background_color_gradient_first_color, rgba(78, 46, 229, 1)),
                        var(--wpstream_type_2_button_hover_background_color_gradient_second_color, rgba(89, 125, 250, 1))
        );
      }
      border-width: calc( var(--wpstream-type-2-button-border-width, 0) * 1px );
      border-style: solid;
      border-color: var(--wpstream-type-2-button-border-color, transparent);
      border-radius: calc( var(--wpstream-type-2-button-border-radius, 8) * 1px );
      opacity: calc( var(--wpstream-type-2-button-opacity, 100) / 100 );


      font-size: 16px;
      font-weight: 500;
      transition: all .15s ease-in-out!important;
      padding: 10px 20px;
      border: 1px solid var(--secondary-white-color);
      border:none;
      &:hover {
        color: $anti-flash-white!important;
        border: 1px solid transparent;
        border:none;
      }
    }
  }

}

//comments list
.wpstream_single_page_comments_lists {
  margin-top: 2rem;
  gap: 1.5rem;
}

.wpstream_comment_box {
  gap: .75rem;
  img{
    height: 45px;
  }
  b {
    font-weight: 500;
  }

  span {
    color: $battleship-grey;
  }
  a{
    text-decoration: underline;
  }
}


#comments{
  .card{
    background-color: transparent;
  }
  form{
    margin-bottom: 15px;
  }
}

ol.wp-block-latest-comments{
  padding-left: 0px;
}