static/src/stylesheets/module/_discussion.scss

@use "sass:math";

$comment-meta-breakpoint: leftCol;
$avatarSize-big: 48px;
$avatarSize-small: 36px;
$avatarPadding: $gs-gutter * 0.5;

/* ==========================================================================
   Discussion
   ========================================================================== */

.discussion {
    margin-bottom: $gs-baseline * 2;
    min-height: $gs-baseline * 16;

    .pagination_legend {
        display: none !important; // overriding .hide-on-mobile-inline
    }
}


.discussion--closed.discussion--empty {
    display: none;
}

.discussion--loaded .discussion__loader {
    display: none;
}

.discussion:not(.discussion--has-top-comments) .d-discussion--top-comments {
    display: none;
}

.discussion__main-comments, .discussion__pagination  {
    @include mq(desktop) {
        margin-right: 0;
        max-width: gs-span(8);
    }
}

.id--signed-in .content--liveblog + .content-footer .discussion .content__main-column {
    // align comments with main column on liveblogs
    @include mq(desktop) {
        margin-left: gs-span(2) + $gs-gutter;
        margin-right: 0;
        max-width: gs-span(8);
        .discussion__heading,
        .d-comment-box--top-level .d-comment-box__meta {
            margin-left: -1 * (gs-span(2)  + $gs-gutter);
            width: $left-column;
            position: absolute;
        }
        .d-comment-box--top-level {
            padding-top: $gs-baseline * 2;
            .d-comment-box__meta {
                top: $gs-baseline * 4;
            }
        }
    }
    @include mq(leftCol) {
        margin-left: gs-span(4) + $gs-gutter;
        margin-right: 0;
        .discussion__heading,
        .d-comment-box--top-level .d-comment-box__meta {
            margin-left: -1 * (gs-span(4) + $gs-gutter);
        }
    }
}

.id--signed-out .discussion--empty {
    min-height: gs-height(2);
}

.discussion__top-border {
    @include mq(tablet) {
        border-top: 1px solid $sport-bright;
        margin-top: -1px;
    }
}

.discussion--lowered {
    @include mq(leftCol) {
        margin-right: -($left-column + ($gs-gutter * 9));

        .d-discussion {
            max-width: gs-span(11);
        }
    }
    @include mq(wide) {
        margin-right: -($left-column-wide + ($gs-gutter * 9));

        .d-discussion {
            max-width: gs-span(12);
        }
    }
}

.discussion__warning {
    font-size: 20px;
    margin-bottom: $gs-gutter;
}

.discussion--disabled {
    min-height: $gs-baseline * 4;
}
.discussion__disabled-msg {
    @include fs-headline(3);
    padding-top: math.div($gs-baseline, 1.5);
    color: $brightness-46;
}

.d-discussion {
    font-size: 14px;
}

.d-thread {
    list-style: none;
    margin: 0;
}

.d-discussion__size-message,
.d-discussion__message {
    @include fs-textSans(2);
    margin-bottom: math.div($gs-baseline * 2, 3);
    border-top: 1px solid $brightness-86;
    padding-top: $gs-baseline;
    color: $brightness-46;

    & + .d-comment {
        border-top: 0;
    }
}

.d-discussion__message--error {
    color: $news-main;
}

.discussion__heading {
    margin-bottom: 0;
    padding-top: 0;
    border-top: 1px solid $sport-bright;

    @include mq(tablet) {
        border-top: 0;
    }

    @include mq(leftCol) {
        position: absolute;
        margin-left: -1 * ($left-column + $gs-gutter);
        width: gs-span(2);
    }
    @include mq(wide) {
        margin-left: -1 * ($left-column-wide + $gs-gutter);
        width: gs-span(3);
    }
}

.discussion--not-staff .d-staff-required {
    display: none !important;
}

.discussion__show-button {
    display: none;
}

.discussion--truncated {
    .discussion__show-button {
        display: block;
    }

    &.discussion--has-top-comments {
        .discussion__toolbar,
        .discussion__main-comments {
            display: none;
        }
    }

    .d-top-comment {
        display: none;
        &:first-child,
        .discussion--expanded & {
            display: block;
        }
    }

    .d-comment:nth-child(n+3), // all except first 2 children
    .discussion__comment-box.discussion__comment-box--bottom,
    .discussion__pagination--bottom {
        display: none !important;
    }
}

.discussion--empty {
    .discussion__toolbar,
    .discussion__show-button {
        display: none;
    }
}

.discussion__pagination--bottom {
    .pagination {
        border-top: 1px solid $brightness-86;
    }
}

.d-discussion__meta {
    @include fs-textSans(3);
    float: left;
}

.content__repositioned-comments {
    .content__main-column:not(.discussion__ad-wrapper) {
        @include mq(desktop) {
            max-width: none;
            margin-right: 25%;
        }
    }
}

.discussion__loader,
.discussion--loading .d-thread {
    display: none;
}

.js-on .discussion--loading .discussion__loader {
    display: block;
}

.discussion__ad-slot {
    width: $mpu-original-width;
    position: absolute;
    top: 50vh;
    right: -1 * (gs-span(4) + $gs-gutter);
    height: calc(100% - 100vh);

    @include mq(wide) {
        right: -1 * (gs-span(5) + $gs-gutter);
    }
}


/* Toolbar
========================================================================== */

.discussion__toolbar {
    .id--signed-in .discussion--open &,
    .discussion--has-top-comments & {
        border-top: 1px solid $brightness-86;
    }

    .pagination {
        text-align: center;
    }
}

.discussion__toolbar-item {
    @include fs-textSans(2);
    position: relative;
    top: 1px;
    float: left;
    color: $brightness-46;
    display: inline-block;
    line-height: $gs-baseline * 2;

    margin: $gs-baseline 0;

    .popup,
    .popup__toggle.is-active:before {
        margin-top: -1 * $gs-baseline;
    }

    .popup__action {
        text-transform: capitalize;
    }
    .popup__toggle {
        display: inline-block;
        width: auto;
        &:after {
            border-top-color: $brightness-46;
        }
        &.is-active:after {
            border-bottom-color: $brightness-46;
        }
    }
    span {
        font-weight: bold;
        text-transform: capitalize;
        margin: 0 math.div($gs-gutter, 6) 0 $gs-gutter * 0.25;
    }

    &:not(:first-child) {
        padding-left: $gs-gutter * 0.5;
        margin-left: $gs-gutter * 0.5;
        border-left: 1px solid $brightness-86;
    }
}

.discussion__toolbar-item__checkbox {
    // Unset global styles
    float: none;
    margin-left: 0;
}

/* All comments (top level and reply)
   ========================================================================== */

.d-comment {
    margin: 0;
    padding: 0;
    display: block;
    clear: both;
    position: relative;
}

.d-comment__main {
    padding-bottom: $gs-baseline * 3;
}

.d-comment__main--removed {
    padding-bottom: $gs-baseline;
}

.d-comment__inner {
    padding-top: $gs-baseline * 0.5;
    position: relative;
}

.d-comment:target {
    background-color: $brightness-97;
    &:before,
    &:after {
        content: '';
        position: absolute;
        height: 100%;
        width: .5 * $gs-gutter;
        top: -1px;
        background-color: $brightness-97;
        border-style: solid;
        border-width: 1px 0;
        border-color: $brightness-86;
    }
    &:before {
        left: -.5 * $gs-gutter;
    }
    &:after {
        right: -.5 * $gs-gutter;
    }
    &.d-comment--response {
        &:before,
        &:after {
            border-color: $brightness-93;
        }
    }

    .d-comment-box__parent-comment-spout {
        border-bottom-color: $brightness-86;
    }
    .d-comment-box__parent-comment {
        background-color: $brightness-86;
    }
}

.d-comment-box--top-level .d-comment-box__meta {
    position: relative;

    @include mq(tablet) {
        margin-top: $gs-baseline * 0.5;
    }
    @include mq(leftCol) {
        position: absolute;
        margin-left: -1 * ($left-column + $gs-gutter);
        width: $left-column;
        top: $gs-baseline * 4;
    }
    @include mq(wide) {
        margin-left: -1 * ($left-column-wide + $gs-gutter);
        width: $left-column;
    }

    @include mq($until: tablet) {
        .d-comment-box__avatar-wrapper {
            display: none;
        }
    }

    @include mq($until: desktop) {
        .user-avatar__image {
            width: $avatarSize-small;
            height: $avatarSize-small;
        }
    }
}

.d-comment__avatar-wrapper,
.d-comment-box__avatar-wrapper {
    margin-right: ($gs-gutter * 0.2) * 2;
    margin-top: math.div($gs-baseline, 6);
}

.d-comment-box__avatar-wrapper {
    @include mq($until: leftCol) {
        float: left;
    }
}

.d-comment__avatar-wrapper {
    float: left;
}

.d-comment-box__avatar-wrapper .user-avatar__image {
    width: 60px;
    height: 60px;
}

.d-comment__avatar,
.user-avatar__image {
    @include circular;
}

.d-comment__meta-text,
.d-comment-box__meta-text {
    box-sizing: border-box;
}

.d-comment__author,
.d-comment-box__author {
    @include fs-textSans(4);
    overflow: hidden;
    padding-right: $gs-gutter * 0.25;
    font-weight: bold;
    text-overflow: ellipsis;

    @include mq(tablet) {
        display: block;
    }
}

.d-comment__author {
    display: inline;
}

.d-comment-box__author-label {
    @include fs-textSans(4);
    color: $brightness-46;
}

.d-comment__author-label {
    @include fs-textSans(1);
    display: block;
    color: $sport-dark;
    font-weight: bold;

    .d-comment__gu-icon svg {
        fill: $sport-dark;
    }

}

.d-comment__pick {
    @include fs-textSans(1);
    margin-bottom: math.div($gs-baseline, 6);
    white-space: nowrap;
    font-weight: bold;

    .d-comment__gu-icon svg {
        fill: $brightness-7;
    }
}

.d-comment__gu-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: top;
    margin-right: 1px;
    svg {
        width: 100%;
        height: 100%;
    }
}

.d-comment__timestamp {
    @include fs-textSans(1);
    margin-bottom: $gs-baseline;

    @include mq($until: tablet) {
        padding: 0;
    }

    @include mq(tablet) {
        display: inline;
    }

    a {
        color: $brightness-46;
    }
    .inline-comment-anchor {
        display: none;
        vertical-align: middle;
        margin-left: 2px;
        max-height: 15px;
    }
    .d-comment__inner:hover & .inline-comment-anchor,
    .d-top-comment__meta:hover & .inline-comment-anchor {
        display: inline-block;
    }
}

.d-comment__reply-to-author,
.d-comment-box__reply-to-author {
    @include fs-textSans(4);
    padding-right: $gs-gutter * 0.25;
    display: inline;
}

.d-comment__author {
    display: inline;
    padding-right: 0;
}

.d-comment__meta-text {
    position: static;
    margin-left: 0;
}

.inline-reply {
    &.grey {
        display: inline-block;
        position: relative;
        top: 4px;
        fill: #bdbdbd;
    }
    &.blue {
        fill: #005689;
    }
}
.d-comment-box--top-level .inline-reply.grey {
    display: none;
}

.d-comment--new {
    .d-comment__reply-wrapper {
        display: none;
    }
}

.d-comment__content {
    margin-top: $gs-baseline * 0.5;
    @include mq($until: tablet) {
        clear: both;
    }
}

.d-comment__body,
.d-top-comment__body,
.d-comment-box__parent-comment-body {
    word-wrap: break-word;
}

.d-comment__body,
.d-comment-box__preview-body {
    @include font-size(14, 20);
    position: relative;
    z-index: 2;
    font-family: $f-sans-serif-text;
    margin-bottom: math.div($gs-baseline * 2, 3);

    p {
        margin-top: math.div($gs-baseline * 2, 3);
        word-wrap: break-word;

        @include mq($comment-meta-breakpoint) {
            &:first-child {
                margin-top: 0;
            }
        }
    }

    blockquote {
        margin: $gs-baseline $gs-gutter;
        padding-left: $gs-gutter * 0.5;
        color: $brightness-46;

        .d-comment__inner--top-level &:first-child {
            margin-top: $gs-baseline * 1.5;
        }

        @include mq(tablet) {
            &:first-child {
                margin-top: $gs-baseline * 1.5;
            }
        }

        @include mq($until: tablet) {
            margin: 0;
            padding-left: $avatarSize-small * 0.5;
        }
    }
}



/* Top level comments
   ======================================================= */

.d-comment--top-level {
    border-top: 1px solid $brightness-86;
}

.d-comment__inner--top-level {
    @include mq(tablet) {
        .d-comment__avatar-wrapper {
            margin-left: -1 * ($avatarSize-big + $avatarPadding);
        }
    }

    .d-comment__avatar,
    .user-avatar__image {
        overflow: hidden;
        width: $avatarSize-small;
        height: $avatarSize-small;
        @include mq(tablet) {
            width: $avatarSize-big;
            height: $avatarSize-big;
        }
    }
    @include mq(tablet) {
        margin-left: $avatarSize-big + $avatarPadding;
    }
}

/* Reply comments
   ========================================================================== */

.d-comment--response {
    @include mq($until: tablet) {
        .d-comment__timestamp,
        .d-comment__avatar-wrapper {
            display: none;
        }
        .d-comment__content {
            margin: 0;
        }
    }
    @include mq(tablet) {
        .d-comment__avatar-wrapper {
            margin-left: -1 * ($avatarSize-small + $avatarPadding);
        }
        .d-comment__avatar {
            width: $avatarSize-small;
            height: $avatarSize-small;
        }
    }
}

.d-comment--response,
.d-comment-box--response {
    border-top: 1px solid $brightness-93;
    margin-left: $gs-gutter * 1.5;

    @include mq(tablet) {
        margin-left: $avatarSize-big + $avatarPadding;
    }

}


.d-comment__inner--response {
    @include mq(tablet) {
        margin-left: $avatarSize-small + $avatarPadding;
    }
}

.d-show-more-replies {
    @include fs-textSans(2);
    border-top: 1px dotted $brightness-86;
    padding: $gs-baseline 0;

    @include mq(tablet) {
        margin-left: $avatarSize-big + $avatarPadding;
    }
}

.d-show-more-replies__button.button--show-more {
    padding-left: $gs-baseline * 2;
    svg {
        fill: $brand-main;
        height: 14px;
        width: 14px;
        left: $gs-gutter * 0.5;
    }
}

/* Removed
   ======================================================= */

.d-comment__comment-removed {
    @include fs-textSans(1);
    color: $brightness-46;
    margin-top: math.div($gs-baseline, 1.5);

    a {
        color: $brand-pastel;
    }
}


/* Recommend
   ======================================================= */

$comment-recommend-button-size: 19px;

.d-comment__recommend {
    position: absolute;
    right: 0;
    top: $gs-baseline * 0.5;
    height: $comment-recommend-button-size;

    @include mq(desktop) {
        min-width: 28px;
        text-align: center;
    }
}

.d-comment__recommend-button {
    width: $comment-recommend-button-size;
    height: $comment-recommend-button-size;
    display: inline-block;
    background-color: $brightness-97;
    cursor: default;
    position: relative;
    top: 1px;
    float: right;

    .inline-arrow-up-white svg {
        position: relative;
        height: $gs-baseline;
        padding-top: $gs-baseline*0.25;
        padding-left: math.div($gs-baseline, 6);
        fill: $brightness-46;
    }
    .id--signed-in .d-discussion--recommendations-open & {
        cursor: pointer;
    }
    .d-comment__recommend--clicked &,
    .d-comment__recommend--recommended & {
        cursor: default;

        svg {
            fill: #ffffff;
        }
    }
}

.d-comment__recommend-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: $comment-recommend-button-size;
    height: $comment-recommend-button-size;
    border-radius: 18px;
    background-color: $brightness-97;
}
.d-comment__recommend-count {
    @include fs-textSans(1);
    display: inline-block;
    overflow: hidden;
    min-width: 12px;
    color: $brightness-46;
    text-align: right;
    line-height: $comment-recommend-button-size;
    height: $comment-recommend-button-size;
    margin-right: $gs-gutter * 0.25;
}

.d-comment__recommend-count--old {
    margin-top: 2px;
}

.d-comment__recommend-count--new,
.d-comment__recommend-count--old {
    display: block;
    position: relative;
}

@keyframes pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2);
    }
}

.d-comment__recommend--clicked,
.d-comment__recommend--recommended {
    .d-comment__recommend-button,
    .d-comment__recommend-pulse {
        transition: background-color .25s ease-in-out;
        background-color: $sport-bright;
    }
    .d-comment__recommend-pulse {
        animation: pulse .5s ease-in-out 1;
    }
}

.d-comment__recommend--recommended {
    .d-comment__recommend-count--old,
    .d-comment__recommend-count--new {
        top: -1 * $comment-recommend-button-size;
        transition: top .15s .15s ease-in-out;
    }
}


/* Comment actions
   ======================================================= */

.id--signed-in .discussion--open .discussion__comments .d-comment__actions__main {
    // only show reply/pick actions when user is signed in and discussion is open
    display: block;
}

.d-comment__actions {
    position: absolute;
    bottom: $gs-baseline;
    .discussion--closed & {
        .d-comment__action--reply,
        .d-comment__action-separator,
        .d-comment__action-pick {
            display: none;
        }
    }
}

.d-comment__actions:hover {
    opacity: 1;
}

.d-comment__actions--left {
    bottom: .5rem;
}

.d-comment__action {
    @include fs-textSans(3);
    display: inline-block;
    color: $sport-dark;
    font-weight: bold;
    line-height: 20px;
    width: auto;
}

.d-comment__action--reply {
    cursor: pointer;
    margin-right: $gs-gutter * 0.25;

    &:hover {
        text-decoration: underline;
    }

    .inline-reply svg {
        vertical-align: middle;
    }
}

.d-comment__action--report {
    font-weight: normal;
    position: absolute;
    right: math.div($gs-baseline, 3);
    bottom: $gs-baseline;
    font-size: 11px;

    a {
        color: $brightness-46;
    }

    .discussion__comments__top & {
        right: $gs-gutter;
    }
}

.d-comment__action--pick {
    color: $brightness-46;
}

.d-comment__action-separator {
    @include fs-textSans(1);
    display: inline-block;
    position: relative;
    bottom: 1px;
    margin: 0 ($gs-gutter * 0.2) * 2;
    color: $brightness-46;
    vertical-align: bottom;
}

.discussion--open {
    .d-comment__reply-wrapper,
    .d-comment__action-separator {
        display: inline-block;
    }
}

.comment-share-icon {
    fill: $brand-main;
}

.comment-share-icon svg {
    vertical-align: middle;
}

.sharing-buttons {
    cursor: pointer;
    display: inline-block;
}

.comment-facebook-icon,
.comment-twitter-icon {
    transform: scale(0);
}

.comment-facebook-icon {
    transition: all .2s .1s ease-in-out;
}

.comment-twitter-icon {
    transition: all .2s ease-in-out;
}

/* Report
   ======================================================= */

.d-report-comment__label,
.d-report-comment__field {
    box-sizing: border-box;
    display: block;
    width: 100%;
}
.d-report-comment__label {
    margin-top: $gs-baseline;
}
.d-report-comment__field {
    @include fs-textSans(3);
    padding: $gs-baseline * 0.5 $gs-gutter * 0.25;
}
.d-report-comment__submit {
    margin-top: $gs-baseline;
}
.d-report-comment__close {
    float: right;
    margin-bottom: $gs-baseline * 0.5;
    width: auto;
}


/* Top Comments
   ========================================================================== */

.d-discussion--top-comments {
    padding-top: $gs-baseline;
}

.d-top-comment-container {
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

@include mq(tablet) {
    .d-top-comment-container {
        width: 50%;
        float: left;
    }

    .d-top-comment-container--left {
        padding-right: $gs-gutter * 0.5;
    }

    .d-top-comment-container--right {
        padding-left: $gs-gutter * 0.5;
    }
}


.d-top-comment {
    margin-bottom: $gs-baseline * 2;

    .d-comment__avatar-wrapper {
        display: inline-block;
        vertical-align: middle;
    }

    .d-comment__avatar {
        width: $avatarSize-big;
        height: $avatarSize-big;
    }

    .d-comment__author-label {
        margin-top: 5px;
    }
}

.d-top-comment__pick {
    font-weight: bold;
    margin-bottom: math.div($gs-baseline * 2, 3);
}

.d-top-comment__bubble {
    @include fs-textSans(4);
    color: $brightness-7;
    box-sizing: border-box;
    padding: $gs-baseline math.div($gs-baseline * 4, 3);
    position: relative;
    background-color: $brightness-93;
    border-radius: 15px;
}

.d-top-comment__bubble-spout {
    width: 24px;
    height: 24px;
    margin-left: $avatarSize-big * 0.5;
    fill: $brightness-93;
}

.d-top-comment__body {
    $line-height: get-line-height(textSans, 4);
    margin-bottom: $gs-baseline * 0.5;
    @include mq(tablet) {
        min-height: 5 * $line-height;
    }

    blockquote {
        padding-left: $gs-gutter * 0.5;
        color: $brightness-46;
    }
}

.d-top-comment__meta {
    position: relative;
    .d-comment__meta-text {
        margin-top: $gs-baseline * 0.5;
    }
    .d-comment__timestamp {
        display: block;
        margin-bottom: 0;
        padding: 0;
    }
}


/* New Comment
   ===========================================================================*/

.comment {
    @include fs-textSans(4);
    display: block;
    position: relative;
}
.comment__datecreated {
    @include fs-textSans(1, true);
    display: block;
}
.comment--speechy {
    border: 0;
    padding: 0 0 math.div($gs-baseline, 3) * 10;

    .comment__inner {
        box-sizing: border-box;
        background-color: $brightness-97;
        display: inline-block;
        padding: math.div($gs-baseline, 3) * 2 $gs-gutter * 0.5 $gs-baseline;
        max-width: $right-column;
        position: relative;
        width: 100%;

        &:before,
        &:after {
            content: ' ';
            position: absolute;
            top: 100%;
            pointer-events: none;
        }

        &:before { // Pointer (equilateral triangle)
            border: solid transparent;
            height: 0;
            width: 0;
            border-color: rgba($brightness-97, 0);
            border-top-color: $brightness-97;
            border-width: 30px;
            left: 23px;
            margin-left: -30px;
        }

        &:after { // Mask (right-skewed parellelogram)
            transform: skew(-10deg);
            background-color: #ffffff;
            height: 24px;
            width: 24px;
            left: -5px;
        }
    }
}

.comments-link {
    @include fs-textSans(1, true);
    display: block;
    float: right;
    margin-top: -(1 + math.div($gs-baseline, 3) * 4);

    .i {
        position: relative;
        margin-left: 7px;
        top: 2px;
    }
}

.comment__meta {
    margin-top: $gs-baseline;
}


/* Person
   ========================================================================== */

.person {
    @include fs-textSans(2, true);
}
.person__avatar {
    @include circular;
    overflow: hidden;
    float: left;
    height: 36px;
    margin-right: 15px;
    width: 36px;
}


/* Badges
   ========================================================================== */

.d-badge:after {
    @extend %d-badge-icon;
}
.d-badge--contributor:after {
    content: 'c';
    text-indent: -1px;
}
.d-badge--guardian-staff:after {
    content: 'g';
    line-height: .9;
}
.d-badge__label {
    /* Hide the label but not to screen readers */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/* Comment Box
   ========================================================================== */

.d-discussion__error {
    @include fs-textSans(4);
    margin-top: math.div($gs-baseline, 3) * 2;
    color: $news-main;

    .d-discussion__error-text {
        display: inline-block;
        margin-left: $gs-gutter * 1.2;

        .tooltip-box & {
            margin-left: 0;
            margin-bottom: .25rem;
        }

    }
    .i-alert { position: absolute; }
}

.d-comment-box__error-meta {
    color: $brightness-46;
}

.d-comment-box--response {
    border-top: 1px solid $brightness-86;
    padding-top: $gs-baseline * 0.5;

    .d-comment-box__author-label {
        display: none;
    }

    .d-comment-box__author {
        display: inline;
        padding-right: 0;
    }
    .d-comment-box__meta-text {
        position: relative;
        margin-left: 0;
    }
}

.discussion__comment-box {
    display: none;
    .id--signed-in .discussion--open & {
        display: block;
    }
}

.d-bar {
    @include fs-textSans(4);
    margin-bottom: math.div($gs-baseline, 3) * 4;
    color: $brightness-46;
}
.d-comment-box__body {
    box-sizing: border-box;
    border: 1px solid $brightness-86;
    height: 50px;
    margin: math.div($gs-baseline, 3) * 2 0;
    padding: math.div($gs-baseline, 3) * 2 $gs-gutter * 0.5;
    width: 100%;
    resize: vertical;
    word-break: break-word;
    background: transparent;
    position: relative;
    z-index: 2;
    .d-comment-box--top-level &::placeholder {
        color: $brightness-7;
        font-weight: bold;
    }
    .d-comment-box--top-level.d-comment-box--expanded &::placeholder {
        color: #ffffff;
    }
    .discussion__comment-box--bottom & {
        margin-top: 0;
    }
}

.d-comment-box--top-level {
    @include mq(leftCol) {
        padding-top: $gs-baseline * 2;
        .discussion__comment-box--bottom & {
            padding-top: 0;
        }
    }
}

.discussion__comment-box--bottom--hidden {
    display: none !important;
}

.d-comment-box__content {
    position: relative;
    clear: both;
}

.d-comment-box--invalid {
    .d-comment-box__body {
        border-color: $news-main;
    }
}
.d-comment-box--expanded .d-comment-box__body {
    margin-top: math.div($gs-baseline, 6);
    height: gs-height(3);
}
.d-comment-box__add-comment {
    display: none;
}
.d-comment-box__submit {
    vertical-align: middle;
    &[disabled] {
        background-color: $brightness-86;
        border-color: $brightness-86;
    }
}
.d-comment-box__cancel {
    margin-left: $gs-gutter;
}
.d-comment-box__reply-to,
.d-comment-box__cancel {
    @include fs-textSans(1);
    color: $brightness-7;
}
.d-comment-box__hide-preview,
.d-comment-box__preview {
    @include fs-textSans(1);
    color: $brightness-46;
    font-weight: bold;
}
.d-comment-box__hide-preview {
    display: none;

    .d-comment-box--preview-visible & {
        display: inline-block;
    }
}
.d-comment-box__hide-parent,
.d-comment-box__show-parent {
    @include fs-textSans(2);
    display: none;
    margin-left: $gs-gutter;
}

.d-comment-box--response {

    padding-top: $gs-baseline * 0.5;

    .d-comment-box {
        padding-left: none;
    }
    .d-comment-box__content {
        margin-left: 0;
        padding-bottom: $gs-baseline;
    }
    .d-comment-box__avatar-wrapper {
        display: none;
    }
    .d-comment-box__show-parent {
        display: inline;
    }

    &.d-comment-box--parent-visible {
        .d-comment-box__hide-parent {
            display: inline;
        }
        .d-comment-box__show-parent {
            display: none;
        }
    }
}
.d-comment-box__reply-to {
    display: inline-block;
}
.d-comment-box__preview,
.d-comment-box__cancel {
    display: none;
    bottom: $gs-baseline;
    color: $brightness-46;

    .d-comment-box--expanded &,
    .d-comment-box--response & {
        display: inline;
    }
}
.d-comment-box--preview-visible .d-comment-box__preview {
    display: none !important;
}
.d-comment-box--response .d-comment__meta {
    display: none;
}
.open-cta {
    margin-top: math.div($gs-baseline, 3) * 8;

    .clamp-fade {
        @include simple-gradient(transparent, $brightness-97);
    }
    .clamp-fade__content {
        border-top: 1px solid $brightness-86;
        background: $brightness-97;
    }
}
.d-comment-box__preview-spout,
.d-comment-box__parent-comment-spout {
    display: block;
    left: 0;
    width: 0;
    height: 0;
    border-right: 16px solid transparent;
    border-bottom: 16px solid $brightness-97;
    margin-left: $gs-gutter * 2;
    border-right-style: inset;
}
.d-comment-box__parent-comment {
    @include fs-textSans(4);
    padding: $gs-baseline $gs-gutter;
    background-color: $brightness-97;

    .d-comment-box__hide-parent {
        margin-left: 0;
    }
}
.d-comment-box__parent-comment-author {
    display: inline-block;
    font-weight: bold;
    margin-bottom: $gs-baseline * 0.5;
}
.d-comment-box__parent-comment-body {
    position: relative;
}
.d-comment-box__parent-comment-wrapper {
    margin-top: $gs-baseline * 0.5;
    display: none;
}
.d-comment-box--parent-visible {
    .d-comment-box__parent-comment-wrapper {
        display: block;
    }
}

.d-comment-box__preview-spout {
    margin-left: $gs-gutter * 10;
}
.d-comment-box__preview-wrapper {
    display: none;

    .d-comment-box--preview-visible & {
        display: block;
    }
}
.d-comment-box__preview-block {
    display: block;
    background-color: $brightness-97;
    padding: $gs-baseline $gs-gutter;
}
.d-comment-box__preview-body {
    margin: $gs-baseline 0;
}

.d-comment-box__formatting-controls {
    display: none;
    float: right;
    margin-top: - ($gs-gutter * 0.5);

    @include mq(tablet) {
        .d-comment-box--expanded &,
        .d-comment-box--response & {
            display: inline-block;
        }
    }
}

.d-comment-box__formatting-bold {
    font-weight: bold;
}
.d-comment-box__formatting-italic {
    font-style: italic;
}
.d-comment-box__formatting-bold,
.d-comment-box__formatting-italic,
.d-comment-box__formatting-quote,
.d-comment-box__formatting-link {
    @include fs-textSans(2);
    display: inline-block;
    border: 1px solid $brightness-86;
    color: $brightness-46;
    text-align: center;
    cursor: pointer;
    margin-left: $gs-gutter * 0.2;
    padding: 2px 5px 0px;
    min-width: 11px;
    line-height: 17px;

    &:hover {
        border-color: $brand-main;
    }
}

.d-comment-box__community-standards {
    display: none;
}

.d-comment-box--expanded .d-comment-box__community-standards {
    @include fs-textSans(1);
    display: block;
    background-color: $brightness-97;
    padding: math.div($gs-baseline, 3) * 2 ($gs-gutter * 0.5);
    margin-top: $gs-baseline * 0.5;
}

.d-comment-box__onboarding {
    display: none;
}

.d-comment-box__onboarding h3 {
    font-weight: bold;
}

.d-comment-box--onboarding-visible .d-comment-box__onboarding {
    @include fs-textSans(2);
    display: block;
    background-color: colour(brightness-97);
    padding: $gs-baseline $gs-gutter;
}

.d-comment-box--onboarding-visible .d-comment-box__content {
    display: none;
}

.d-comment-box__onboarding-preview-body p {
    background-color: $brightness-97;
    padding: $gs-baseline $gs-gutter;
    margin-bottom: $gs-baseline;
}

.d-comment-box__onboarding-cancel {
    background-color: colour(brightness-86);
    border-color: colour(brightness-86);
}

.d-comment-box__onboarding-username-input {
    box-sizing: border-box;
    display: block;
    background-color: transparent;
    border: 1px solid $brightness-86;
    color: $brightness-7;
    padding: $gs-baseline*0.5 $gs-gutter;
    border-radius: 18px;
    margin: $gs-baseline 0;
    margin-top: $gs-baseline*0.5;
    width: 70%;

    &:focus {
        border-color: $brightness-46;
        outline: none;
    }
}

.d-comment-box__onboarding-username-label {
    @include fs-textSans(3);
    font-weight: bold;
}

.d-comment-box__onboarding-username-error-border {
    border-color: $news-main;
}

.d-comment-box__onboarding-username-error-message {
    color: $news-main;
}