@import colors

.comments>ul
    list-style-type: none
    margin: 0 0 2em 0
    padding: 0



.comment-form-container
    &:not(.editing)
        .tabs nav
            display: none
        .tabs .edit.tab
            display: none
        .comment-content
            margin-left: 0.5em
    &.editing
        .tab:not(.active)
            display: none
        .tabs-wrapper
            background: $active-tab-background-color
        .tab
            padding: 0.3em
            .comment-content-wrapper
                background: $window-color
                overflow: hidden
                .comment-content
                    margin: 1em
            textarea
                resize: vertical
                width: 100%
                max-height: 80vh
                box-sizing: padding-box
                vertical-align: top /* ghost margin on chrome */

    form
        width: auto
        margin: 0

    nav
        vertical-align: middle !important
        margin: 0 0.3em 0.5em 0 !important
        &.buttons
            float: left
        &.actions
            float: left
            margin-top: 0.3em !important



.comment
    margin: 0 0 1em 0
    padding: 0
    display: -webkit-flex
    display: flex

    .avatar
        margin-right: 1em
        -webkit-flex-shrink: 0
        flex-shrink: 0
        vertical-align: top

        .thumbnail
            width: 40px
            height: 40px
            margin: 0
        a
            display: inline-block

    .body
        width: 100%

        header
            line-height: 16pt
            vertical-align: middle
            margin-bottom: 0.5em
            background: $top-navigation-color
            padding: 0.2em 0.5em

            .date, .score-container, .edit, .delete
                margin-left: 2em
                font-size: 95%
            .edit, .delete, .score-container a, .nickname a
                color: mix($main-color, $inactive-tab-text-color)
            .edit, .delete
                font-size: 80%

            i
                margin-right: 0.3em
            .downvote i
                text-align: right
            .upvote i
                display: inline-block
                width: 1em
                margin: 0
            .value
                text-align: center
                display: inline-block
                width: 2em

        .messages
            margin: 1em 0



.comment-content
    ul
        list-style-position: inside
        margin: 1em 0
        padding: 0

    .sjis
        font-family: 'MS PGothic', 'ＭＳ Ｐゴシック', 'IPAMonaPGothic', 'Trebuchet MS', Verdana, Futura, Arial, Helvetica, sans-serif
        background: #fbfbfb
        color: #111
        font-size: 12pt
        line-height: 1
        margin: 0
        padding: 4px
        overflow: auto
        white-space: pre
        word-wrap: normal

    p:first-child
        margin-top: 0

    .spoiler
        background: #eee
        color: #eee
        &:hover
            color: dimgray
        &:before
            content: '['
            color: #000
        &:after
            content: ']'
            color: #000

    blockquote
        border-left: 3px solid #eee
        margin-left: 0
        padding: 0.3em 0.3em 0.3em 0.7em
        background: #fafafa
        color: #444

    blockquote :last-child
        margin-bottom: 0



.global-comment-list
    text-align: left

    &>ul
        list-style-type: none
        margin: 1em 0
        padding: 0

        &>li
            display: flex
            margin-bottom: 2em

            .post-thumbnail
                float: left
                vertical-align: top
                margin-right: 1em
                .thumbnail
                    width: 12em
                    height: 8em
                    margin: 0
                a
                    display: inline-block

            .comments-container
                width: 100%