ArticleTemplates/assets/scss/modules/blocks/_block--discussion.scss

// /*doc
// ---
// title: Discussion
// name: block--discussion
// category: Blocks
// ---
// Display a discussion thread.
//
// ```html_example
// <div class="block block--discussion-thread">
//     <div class="prose resizable">
//         <p>A dicussion thread contains indvidual comments. See the <a href="#comment">comment markup pattern</a>.</p>
//     </div>
// </div>
//
// <div class="comments-0">
//     <div class="block block--discussion-empty">
//         <div class="comment">
//             <div class="prose resizable">
//                 <p>Open for comments. <a href="x-gu://leavecomment">Be the first to join the debate</a></p>
//             </div>
//         </div>
//     </div>
// </div>
//
// <div class="comments-has-failed">
//     <div class="block block--discussion-failed">
//         <div class="comment">
//             <div class="prose resizable">
//                 <p>Comments are currently unavailable. Please try again later.</p>
//             </div>
//         </div>
//     </div>
// </div>
// ```
// */

// Discussion thread
.block--discussion-thread {
    .comment:nth-of-type(n+5) {
        display: none;
    }

    &.block--discussion-thread--checked {
        margin-top: 0;
    }

    &.expand {
        .comment {
            display: block;
        }
    }

    &.block--discussion-thread--orphan {
        .comment {
            display: block;
        }
    }
}

// Discussion thread states
.block--discussion-empty,
.block--discussion-failed {
    color: color(brightness-46);
    @include meta();
    display: none;
}

.comments-0 {
    .block--discussion-empty {
        display: block;
    }
}

.comments-0,
.comments-1,
.container--has-failed {
    .container__action--sort a {
        color: color(brightness-46);
    }

    .container__action--view-more {
        display: none;
    }
}

// Closed/open states
.container__action {
    .comments-closed-label {
        color: color(brightness-46);
        text-align: right;
    }
}

.comments--closed {
    .container__header {
        .container__title {
            .container__title__label {
                line-height: 2.6rem;
            }

            .touchpoint.comments-closed-label {
                .touchpoint__label {
                    color: color(brightness-46);
                    padding: 0;
                    display: block;
               }
            }
        }

        .container__action {
            .comments-closed-label .touchpoint__label {
                display: block;
                padding-top: 12px;
            }

            .touchpoint--primary {
                display: none !important;
            }

        }
    }
}

.container--has-failed {
    .more--comments,
    .block--discussion-empty {
        display: none;
    }
}