/****************************************************************************** 
* Comments
******************************************************************************/

  .page-template-template-full-width .post-comments {
    margin-left: -2rem;
  }
  
  .post-comments {
    background-color: $grey-200;
    border-bottom: 1px solid rgba($black, 0.06);
    border-top: 1px solid rgba($black, 0.06);
    margin-left: calc((#{$container-width} - 64px - 100vw) / 2);
    overflow: hidden;
    padding: 0;
    width: 100vw;

    .container {
      align-items: flex-start;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    h3.comments-closed {
      margin-bottom: 0;
      padding: 3rem 0;
    }
  }

  .page .post-comments {
    margin-top: 2rem;
  }

/****************************************************************************** 
* Comment Form
******************************************************************************/
  
  .post-comments-form {
    flex: 0 0 50%;
    margin-top: 3rem;
    padding-bottom: 3rem;
    position: sticky;
    top: 0;

    h3 {
      margin-bottom: 1rem;

      &#reply-title {
        margin-bottom: 1.5rem;
      }
    }
  }

/****************************************************************************** 
* Comments List
******************************************************************************/
  
  .post-comments-list {
    flex: 0 1 auto;
    margin: 3rem 2rem 2rem 0;
    width: calc(50% - 2rem);

    h3 {
      margin-bottom: 1.5rem;
    }

    .comments-pagination {
      align-items: center;

      .nav-links {
        display: flex;
        justify-content: space-between;

        .nav-previous a {

          .fa {
            margin-right: 0.5rem;
          }
        }

        .nav-next a {

          .fa {
            margin-left: 0.5rem;
          }
        }
      }

      a {
        background-color: $color-800;
        border: 0;
        border-radius: 0.25rem;
        color: $color-100;
        cursor: pointer;
        display: inline-block;
        font-size: inherit; 
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        text-align: center;
        text-decoration: none;

        

        &:hover {
          background-color: $color-700;
          color: $color-200;
        }
      }
    }

    ol {
      margin: 0;
      padding: 0;

      .trackback,
      .pingback {
        background-color: $white;
        border-radius: 0.25rem;
        padding: 1rem;
      }

      .comment-content {
        background-color: $white;
        border-radius: 0.25rem;
        cursor: pointer;
        margin-bottom: 1rem;
        max-height: 240px;
        overflow-y: hidden;
        padding: 0 1rem 2.5rem 1rem;
        position: relative;
        -webkit-transition: all ease-in-out 600ms;
        -moz-transition: all ease-in-out 600ms;
        -ms-transition: all ease-in-out 600ms;
        -o-transition: all ease-in-out 600ms;
        transition: all ease-in-out 600ms;

        &::after {
          align-items: center;
          background-color: $grey-300;
          bottom: 0;
          content: 'Continue reading...';
          cursor: pointer;
          display: flex;
          font-size: 0.875rem;
          justify-content: center;
          left: 0;
          padding: 0.5rem 0;
          position: absolute;
          right: 0;
        }
      }

      p:last-child,
      li:last-child {
        margin-bottom: 0;
        padding-bottom: 1rem;
      }

      .comment-content-open {
        background-color: $grey-100;

        &::after {
          content: 'Close comment...';
        }
      }

      .comment-metadata {
        font-size: 0.875rem;
        margin: 0 0 1rem 0;
      }

      .comment-reply-link {
        font-size: 0.875rem;
      }

      .comment-edit-link {
        margin-left: 0.5rem;
      }

      .comment-author,
      .bypostauthor,
      .by-post-author {
        align-items: center;
        display: flex;
        margin: 0 0 0.5rem 0;

        img {
          border-radius: 10rem;
          margin-right: 1rem;
        }

        .says {
          flex: 1 1;
          margin-left: 0.25rem;
        }
      }
    }

    > ol ol {
      background-color: $grey-100;
      margin: 2rem 0 0 2rem;
      padding: 1rem 1rem 0 1rem;
    }

    > ol li {
      list-style-type: none;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
    }
  }

/****************************************************************************** 
* Comments List
******************************************************************************/

  @media (max-width: $breakpoint-desktop) {

    .post-comments {
      margin-left: -2rem;
      // width: auto;

      .container {
        flex-direction: column;
      }
    }

    .post-content {
      flex: 1 1;
      flex-direction: column;

      .widgets {
        order: 1;
      }
    }

    .page-template-template-aside .post-content .post-content-inner {
      margin: 0;
      order: 0;
    }

    .post-comments-form {
      flex: 1 1;
      margin-right: 0;
      width: 100%;
    }

    .post-comments-list {
      flex: 1 1;
      margin: 2rem 0 0 0;
      width: 100%;
    }
  }