/*
 *  4.7 Comment Styling
 * ---------------------
 */
.comments {
    h2 {
        font: {
            family: $sfont;
            weight: $sweight;
        }
        letter-spacing: 3px;
        line-height: 2;
        text-align: center;
    }

    .comments-list {
        li {
            border: $line;
            margin: 10px 0px;
        }

        a {
            @include linkline();
        }

        .comment-author,
        .comment-meta,
        p,
        .reply {
            padding: 20px;
            box-sizing: border-box;
        }

        .comment-author {
            width: 100%;
            border-bottom: $line;
            font-size: 1.2em;
            font-weight: $ssnormal;
            text-transform: uppercase;

            @if $title_line_display == yes {
                @include arrowline($widget_title_bar_bg, $widget_title_bar_color, $line, 10px);
            }
            @else {
                position: relative;
                background: $widget_title_bar_bg;
                color: $widget_title_bar_color;
            }

            .fn, .says {
                display: inline-block;
                vertical-align: middle;
            }

            img {
                border-radius: 50%;
                display: inline-block;
                vertical-align: middle;
                margin-right: 20px;
            }
        }

        .comment-meta {
            font-size: .8em;
            padding: 5px;
        }

        .children {
            width: 90%;
            margin-left: 10%;

            li {
                border: none;
                border-left: $line;

                .comment-author {
                    border: none;
                    &:after {
                        display: none;
                    }
                }
            }
        }
    }
}

.comment-respond {
    h3 {
        text-align: center;
        margin-bottom: 20px;

        @if $title_line_display == yes {
            @include arrowline($widget_title_bar_bg, $widget_title_bar_color, $line, 10px);
        }
        @else {
            position: relative;
            background: $widget_title_bar_bg;
            color: $widget_title_bar_color;
        }
    }

    .comment-notes {
        font-style: italic;
        margin-bottom: 20px;
    }

    .comment-form-comment {
        position: relative;

        textarea {
            font-size:18px;
            padding:10px 10px 10px 5px;
            display:block;
            box-sizing: border-box;
            width:100%;
            border:none;
            border-bottom:$line;
            margin-top: 20px;
        }

        label {
            font-size:14px;
            font-weight:normal;
            position:absolute;
            pointer-events:none;
            left:5px;
            top:-20px;
            transition:0.2s ease all;
        }
    }

    .form-submit {
        text-align: center;
        margin: 20px 0px;

        input {
            transition: .3s all ease;
            border: none;
            text-align: center;
            padding: 10px 0px;
            font-family: $sfont;
            letter-spacing: 2px;
            @include  ghostbutton($rm_border_color, $rm_background_color, $rm_hover_border_color, $rm_hover_background_color);

            &:hover {
                cursor: pointer;
            }
        }
    }
    .form-allowed-tags {
        font-size: .8em;
        font-family: monospace;
    }
}

.group {
        position:relative;
        margin-bottom:20px;

        input {
            font-size:18px;
            padding:10px 10px 10px 5px;
            display:block;
            box-sizing: border-box;
            width:100%;
            border:none;
            border-bottom:$line;

            &:focus {
                outline:none;

                ~ .bar:before,
                ~ .bar:after {
                    width:50%;
                }
            }

            &:valid ~ label,
            &:focus ~ label {
                top:-20px;
                font-size:14px;
            }
        }

        label {
            font-size:18px;
            font-weight:normal;
            position:absolute;
            pointer-events:none;
            left:5px;
            top:10px;
            transition:0.2s ease all;
        }

        .bar {
            position:relative;
            display:block;
            width:100%;

            &:before,
            &:after {
                content:'';
                height:2px;
                width:0;
                bottom:1px;
                position:absolute;
                background:$comment_input_highlight_color;
                transition:0.2s ease all;
            }
            &:before {
                left:50%;
            }
            &:after {
                right:50%;
            }
        }
    }