@import (reference) "mt-var.less";

.comment-list {
    background-color: @comment-background-default;
}

.comment-new {
    border-top: 2px solid darken(@comment-background-default, 20%);
}

.panel-comment {
    .panel-body {
        background-color: @comment-background-default;
    }
    .pagination {
        padding-left: 75px;
        margin: 0;
    }
}

.tabnav-extra {
    display: table-cell;
    vertical-align: middle;
    padding-top: 10px;
    font-size: 12px;
    svg {
        vertical-align: bottom !important;
        path {
            fill: #18a404;
        }
    }
}

.timeline-comment-wrapper {
    padding-left: 60px;
    margin: 15px 15px;
    .timeline-comment {
        position: relative;
        background-color: #fff;
        border: 1px solid #d1d5da;
        border-radius: 3px;
        &::before {
            position: absolute;
            top: 11px;
            right: 100%;
            left: -16px;
            display: block;
            width: 0;
            height: 0;
            pointer-events: none;
            content: " ";
            border-color: transparent;
            border-style: solid solid outset;

            border-width: 8px;
            border-right-color: #d1d5da;
        }
        &::after {
            position: absolute;
            top: 11px;
            right: 100%;
            left: -16px;
            display: block;
            width: 0;
            height: 0;
            pointer-events: none;
            content: " ";
            border-color: transparent;
            border-style: solid solid outset;

            margin-top: 1px;
            margin-left: 2px;
            border-width: 7px;
            border-right-color: lighten(@comment-background-default, 2%);
        }
        .timeline-comment-header {
            padding-right: 15px;
            padding-left: 15px;
            color: #586069;
            background-color: lighten(@comment-background-default, 2%);
            border-bottom: 1px dashed #d1d5da;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            min-height: 42px;
            .timeline-comment-header-text {
                max-width: 70%;
                padding-top: 10px;
                padding-bottom: 10px;
                .user-ud-text {
                    font-size: 12px;
                    color: lighten(@gray-base, 60%);
                }
            }
            .timeline-comment-header-time-text {
                font-size: 12px;
                color: lighten(@gray-base, 60%);
                position: absolute;
                right: 15px;
                top: 15px;
            }
        }
        .timeline-comment-body {
            padding-right: 15px;
            padding-left: 15px;
            min-height: 42px;
            .timeline-comment-body-text {
                padding-top: 10px;
            }
            .timeline-comment-body-edited-text {
                font-size: 12px;
                color: lighten(@gray-base, 60%);
                margin-right: 15px;
            }
            .timeline-comment-sub-list {
                border-top: 1px solid #d1d5da;
                //padding-top: 5px;
                .timeline-comment-sub-item {
                    padding: 8px 0;
                    &:not(:last-child) {
                        border-bottom: 1px dashed #d1d5da;
                    }
                    .timeline-comment-sub-body {
                        span {

                        }
                        .edit-button {
                            font-size: 12px;
                            margin-left: 10px;
                            cursor: pointer;
                            color: @brand-primary;
                            &:hover {
                                color: @brand-danger;
                            }
                        }
                        .delete-button {
                            font-size: 12px;
                            margin-left: 3px;
                            cursor: pointer;
                            color: @brand-primary;
                            &:hover {
                                color: @brand-danger;
                            }
                        }
                    }
                    .timeline-comment-sub-avatar {
                        img {
                            cursor: pointer;
                            float: left;
                            margin-right: 10px;
                            margin-top: -2px;
                            border-radius: 3px;
                            height: 24px;
                            width: 24px;
                        }
                    }
                }
            }
        }
        .timeline-comment-footer {
            padding-right: 15px;
            padding-left: 15px;
            color: #586069;
            background-color: lighten(@comment-background-default, 2%);
            border-top: 1px dashed #d1d5da;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
            min-height: 32px;
            .timeline-comment-footer-button {
                padding-top: 5px;
                padding-bottom: 5px;
                button {
                    min-width: 70px;
                }
            }
        }
    }
    .timeline-new-comment {
        .timeline-comment-header {
            background-color: lighten(@comment-background-default, 2%);
        }
        .timeline-comment-body {
            padding: 8px 8px;
            textarea {
                resize: vertical;
                width: 100%;
                min-height: 200px;
                max-height: 500px;
                margin-bottom: 8px;
            }
        }
    }
    .timeline-comment-avatar {
        img {
            cursor: pointer;
            float: left;
            margin-left: -60px;
            border-radius: 3px;
            height: 44px;
            width: 44px;
        }
    }
}