.comments_list, .comments_list .sub {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid $bg1;

    > li {
        margin: 3em 0;
        border-left: 1px solid $bg2;
        margin-left: -1px;
        padding-left: 0.5em;
        @include transition(border-left-color .5s);
        // FIXME not accessible
        &:hover {
            border-left-color: $primary-color;
        }
    }
}
.comments_list .sub {
    margin-left: 2em;
}
.comment {
    .header {
        text-align: right;
        @include clearfix;
        margin-bottom: 0.5em;
        h5 {
            float: left;
            text-align: left;  // fix for firefox
            margin: 0;
        }
    }
    .footer {
        text-align: right;
        @include clearfix;
        .utility {
            float: left;
        }
    }
    .body > *:last-child {
        margin-bottom: 0.5em;
    }

    .vote {
        opacity: 0.7;
    }
}
html.no-touch .comment {
    .header .utility, .footer .utility_links {
        display: none;
    }
    // FIXME not accessible
    &:hover {
        .vote {
            opacity: 1;
        }
        .header .utility, .footer .utility_links {
            display: inline-block;
        }
    }
}
a.new_comment {
    @include button-small($primary-color, $primary-color);
    color: #fff;

    // copied from showhide_button
    &:after {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-left: 0.3em solid transparent;
        content: "";
        vertical-align: middle;
        margin-left: 0.2em;
    }
    &.less:after {
        border-top: 0;
        border-bottom: 0.3em solid;
    }
}
// FIXME not accessible
.comment:not(:hover) a.new_comment {
    background: none;
    color: $primary-color;
}
.comment_form {
    padding: 1em;
    margin: 1em 0;
}
