@import colors
$comment-header-background-color = $top-navigation-color
$comment-border-color = #DDD

.comment-container
    margin: 0 0 1em 0
    padding: 0 0 0 60px

    .avatar
        float: left
        margin-left: -60px
        vertical-align: top

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

    nav:not(.active), .tab:not(.active)
        display: none

    .comment
        border: 1px solid $comment-border-color

        header
            white-space: nowrap
            font-size: 95%
            vertical-align: middle
            position: relative
            background: $comment-header-background-color
            border-bottom: 1px solid $comment-border-color

            nav.edit
                padding: 0.33em 1em 0 1em
                ul
                    list-style-type: none
                    margin: 0
                    padding: 0
                    li
                        display: inline-block
                        margin: 0 0 -1px 0
                        a
                            padding: 0.25em 1em
                        &.active
                            background: $window-color
                            border: 1px solid $comment-border-color
                            border-bottom: none

            nav.readonly
                padding: 0.33em 1em

            &:before
                position: absolute
                display: block
                content: ' '
                width: 0
                height: 0
                left: -1.5em
                top: calc(50% - 0.75em)
                border: 0.75em solid transparent
                border-right: 0.75em solid darken($comment-border-color, 10%)

            &:after
                position: absolute
                display: block
                content: ' '
                width: 0
                height: 0
                left: calc(-1.5em + 1px)
                top: calc(50% - 0.75em)
                border: 0.75em solid transparent
                border-right: 0.75em solid $comment-header-background-color

            .date, .score-container, .edit
                margin-right: 2em
            .edit, .delete, .score-container a, .nickname a
                &:not(.inactive)
                    color: mix($main-color, $inactive-tab-text-color)

            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

        .body
            width: auto
            margin: 1em

            .keep-height
                position: relative
                textarea
                    position: absolute
                    width: 100%
                    height: 100%
                .tab.edit
                    min-height: 150px

        .messages
            margin: 1em 0


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

    .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

    .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

        :last-child
            margin-bottom: 0