//== Comment respond
.comment-respond {
    .comment-reply-title {
        display: block;
        position: relative;
        line-height: $heading_lh_h4;
        font-size: rem($heading_fz_h4);

        #cancel-comment-reply-link {
            font-size: 0;

            &:before {
                content: '// Click here to cancel reply';
                font-family: $body_font;
                font-size: rem(14px);
                color: $body_color;
                @include transition(all .4s ease-in-out);
            }

            &:hover:before {
                color: $hover_color;
            }
        }
    }

    .comment-form {
        @extend %flex;

        .form-row {
            @include flex(100%);
            @include order(1);

            label {
                margin-bottom: 2px;
                text-transform: uppercase;
                font-size: rem(12px);
                @include heading-txt($heading_color);
            }

            &.form-area {
                @include order(2);

                p {
                    margin-bottom: rem(20px);
                }
            }
        }

        .comment-form-cookies-consent {
            @extend %flex;
            @include flex(100%);
            @include order(3);

            label {
                margin-bottom: 0;
                font-weight: normal;
            }
        }

        .form-submit {
            @extend %flex;
            @include flex(100%);
            @include order(4);
            margin: 0 -5px;

            .btn-comment-submit {
                width: calc(100% - 10px);
                margin: 0 auto;
                padding: rem(12px 20px 9px);
                font-size: rem(16px);

                &:hover {
                    color: #ffffff;
                }
            }
        }

        .input-text {
            background: #f1f1f1;
            @include transition(all .3s ease);
        }
    }
}