@import colors

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

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

    &:not(.editing)
        .tabs nav
            display: none
        .tabs .edit.tab
            display: none
    &.editing
        .tab:not(.active)
            display: none
        .tabs-wrapper
            background: $active-tab-background-color
        .tab
            padding: 1em
            .content-wrapper
                background: $window-color
                overflow: hidden
                .content
                    margin: 1em
            textarea
                resize: vertical
                width: 100%
                max-height: 80vh
                box-sizing: padding-box

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

        .thumbnail
            width: 40px
            height: 40px
            margin: 0

    .body
        width: 100%

        header
            line-height: 16pt
            vertical-align: middle
            margin-bottom: 0.5em
            background: $top-nav-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

        form
            width: auto
            margin: 0

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

        .messages
            margin: 1em 0

    .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