/* for comment and comment-tree */

.comment-form {
    &:extend(.bordered-box);
    @media @mobile {
        margin: 10px 0;
        padding: 2px;
    }
}

.post-comment {
    padding: 12px 6px;
}

#comments,
#comments_nojs {
    clear: both;
    padding: 0 10px;
    @media @mobile {
        padding: 0;
        h1[title-orig="no"] { display: none; }
        .btn { border: none; }
        .cid { display: none; }
        .comment-tree-body > ol {
            margin-left: 0;
            li { margin-left: 0; };
        }
    }
    ol {
	margin: 0;
	padding: 0;
        margin-left: 16px;
        @media @mobile { margin-left: 8px; }
	list-style-type: none;
    }
}

#comment-header {
    &:extend(.bordered-box);
    .alert {
        margin-bottom: 8px;
    }
    .form-inline {
        margin-bottom: 0;
    }
    @media @mobile {
        border: none;
        padding: 0;
        margin: 0 0 4px;
        font-size: 85%;
        text-align: center;
    }
}

@comment-property-text-color: #997a49;

.comment-item {
    &:extend(.bordered-box);

    .body {
        margin: 0.8em 4px;
        
    }
    header {
	h1 {
            &:extend(.rectangle-header);
            margin-bottom: 0;
            @media @mobile { h1 { padding: 3px 6px; } };
	}
	.property {
            margin-left: 4px;
            margin-right: 4px;
	    font-size: 80%;
	    color: @comment-property-text-color;
	}
        .score {
            margin-left: 4px;
            margin-right: 4px;
            cursor: pointer;
        }
        .moderate-reasons {
            margin-left: 4px;
            margin-right: 4px;

            &:extend(.bordered-box);
	    color: @comment-property-text-color;
            .m2 {
                .m2-nod, .m2-nix {
                    cursor: pointer;
                }
            }
        }
    }
    footer {
        .signature {
            border-top: 1px solid @component-border-color;
            color: @comment-property-text-color;
            padding: 6px 0 2px;
        }
        .moderation {
            display: inline;
        }
        .footer-menu {
            .footer-item { display: inline-block; }
            @media @mobile {
                button { color: @anchor-color; }
                .btn {
                    padding: 3px 3px 3px 0;
                    margin-right: 9px;
                }
            }
        }
        select, .btn { width: auto; }
        .dropdown-menu li a:hover { background: #ccc; }
    }

}
.comment-item.folded {
    border: none;
    overflow: hidden;
    display: block;
    height: 1.2em;
    line-height: 100%;
    white-space: nowrap;
    padding: 0;
    margin-bottom: 10px;
    cursor: pointer;
    
    * {
        display: inline;
        background: none;
    }
    .date {display: none};
    .cid {display: none};
    br { display: none;}
    .body {color: gray;}
    footer { display: none; }
    h1[title-orig="no"] .subject {display: none;}
    h1[title-orig="no"]:before {content: "Re:";}
}

.hidden-box {
    &:extend(.bordered-box);
    display: inline-block;
    cursor: pointer;
}