//
// Comments
// --------------------------------------------------

@if not $prev-comment {
    $commentLeftMargin: 35px;

    .comment-container {
        border-radius: 3px;

        .comment {
            .single-comment {
                position: relative !important;
                margin: -0.5rem;

                > .nav-pills.preferences {
                    right: 6px;

                    > .dropdown > .dropdown-toggle:not(.show) {
                        visibility: hidden; // Visible on hovering .comment, see bellow
                    }
                }

                &:hover > .nav-pills.preferences  > .dropdown > .dropdown-toggle {
                    visibility: visible;
                }

                &:first-of-type > .nav-pills.preferences {
                    top: 6px;
                }

                .comment-message {
                    overflow: hidden;
                    @include text-break();
                }

                .comment-header-image {
                    margin-right: 10px;
                }

                .richtext-create-input-group {

                    .mb-3 {
                        margin-bottom: 0 !important;
                    }

                    &.scrollActive .richtext-create-buttons {
                        right: 22px;
                    }
                }

                h4.comment-heading {
                    font-size: 13px;
                    padding-top: 1px;
                    margin-bottom: 3px;

                    a {
                        font-weight: 500;
                    }

                    small {
                        font-weight: 400;
                        font-size: 11px;
                    }
                }

                [data-ui-richtext] pre, [data-ui-richtext] pre code.hljs {
                    background-color: darken($background-color-secondary, 5%);
                }

                .nested-comments-root {
                    .ProseMirror-menubar-wrapper {
                        z-index: 210;
                    }

                    hr.comment-separator:not(:first-of-type) {
                        display: inherit !important;
                    }

                    .showMore {
                        margin-top: 10px;
                    }

                    div.comment {
                        .single-comment {
                            position: relative !important;
                        }
                    }
                }

                &.comment-current {
                    background: var(--hh-background-color-highlight);
                    border-radius: 3px;

                    hr {
                        position: relative;
                        top: -6px;
                    }

                    &:first-of-type {
                        padding-top: 5px;
                        margin-top: -5px;
                    }

                    .nested-comments-root {
                        .comment-container {
                            .showMore {
                                margin-top: 0;
                                padding-top: 5px;
                            }
                        }
                    }
                }
            }

            &.guest-mode {
                .single-comment:last-child {
                    .wall-entry-controls {
                        margin-bottom: 0;
                        margin-left: $commentLeftMargin;
                    }

                    hr {
                        display: none;
                    }
                }
            }

            .comment-blocked-user {
                img[data-contentcontainer-id] {
                    filter: grayscale(100%);
                }
            }

            .showMore {
                padding-bottom: 1rem;
            }

            .jp-progress {
                background-color: #dbdcdd !important;
            }

            .jp-play-bar {
                background: #cacaca;
            }

            .post-file-list {
                background-color: darken($background-color-secondary, 2%);
            }
        }

        .d-flex {
            overflow: visible;
        }

        hr {
            margin: 10px 0;
            border-top: 1px solid var(--hh-background-color-secondary);

            &.comment-separator:first-of-type {
                display: none !important;
            }
        }

        @include media-breakpoint-down(md) {
            .comment .post-files img {
                height: 100px;
            }
        }
    }
}