@use "sass:math";

.comment-item {
    @include clearfix;

    // remove border-radius from last child
    .card .list-group & {
      &:last-child {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .usericon-heading {
        .list-group-item-heading {
            font-size: $font-size-base;
            font-family: $font-family-base;
            font-weight: $font-weight-normal;
            margin-left: 0;
        }
    }

    .comment-privacy .btn.btn-link {
        width: auto;
        border: $btn-border-width solid $btn-secondary-border;
    }

    // when comments is in page footer the attachments are on the right for desktop
    @include media-breakpoint-up(md) {
        .viewfooter & {
            .comment-attachment {
                border-left: $list-group-border-width solid $list-group-border-color;
                margin-left: 0;

                .card {
                    @include card-as-link();
                    width: 100%;
                    margin-top: 0;
                }
                .card-header,
                .card-header a,
                .list-group-item {
                    background-color: transparent;
                }
                .collapsed {
                    font-size: $font-size-base;
                    pointer-events: none;
                }
                // no need to collapse
                .collapse-indicator {
                    display: none;
                }
                .collapse {
                    opacity: 1;
                    display: block;
                    visibility: visible;
                }
                .attachmessage {
                    display: block;
                    margin: $spacing-base 0;
                }
            }
        }
    }

    // when comment block is on page instead of page footer, or in a modal, the attachments need to appear under comment rather than to the right side
    .bt-comment &,
    .modal-docked & {
        .col-md-8,
        .col-md-4 {
            max-width: 100%;
            width: 100%;
            flex: 0 1 auto;
        }
    }

    // Indentation for nested comments
    @for $i from 1 through 5 {
        &.indent-#{$i} {
            $indent-border: $i * $spacing-lg;
            border-left: $indent-border solid $list-group-border-color !important;
            margin-left: 0;
            margin-right: 0;
            .user-icon {
                max-width: 3.125rem; // 50px;
                display: block;
            }
        }
    }

    // Nested comments
    .commentreplyview & {
        border-top-width: $list-group-border-width;
        width: 100%;
    }
}

// peer assessment when owner is viewing and doesn't have the add peer assessment button on top needs a border-top for its first list-group-item
.bt-peerassessment {
    .list-group.list-group-top-border .list-group-item:first-child {
        border-top: 0;
    }
    .feedback {
        ~ .feedbacktable {
            .list-group.list-group-top-border .comment-item.list-group-item:first-child {
                border-top: $list-group-border-width solid $list-group-border-color;
            }
        }
    }
}

// For comment / annotation / peerassessment blocks where the feedback modal is hidden
// we need to hide the android version of tinymce also
.modal-docked:not(.active) .tinymce-mobile-android-container,
.modal-docked:not(.active) .tinymce-mobile-ios-container {
    display: none;
}

// removing the padding in the collapsible fieldset-body for page comments
.comment-fieldset-body {
    padding: 0 !important;

    // adding side padding to pagination wrapper in a collapsible fieldset
    .pagination-wrapper {
        margin: $spacing-base;
    }
}

// padding around comment form within collapsible in page to match list-group padding
.viewfooter .add-comment-container {
    padding: $list-group-item-padding-y $list-group-item-padding-x;
}

// override the default link text-decoration
.star-comment-rating a {
    text-decoration: none;
}

// the solid and outline stars were not working with new fontawesome fonts
.star-rating a.icon {
    font-weight: 900;
}
.star-rating a.icon-regular {
    @include fonttype(regular);
}

// comments in footer need to have list-group top border removed
.viewfooter .feedbacktable .list-group.list-group-top-border .list-group-item:first-child {
  border-top-width: 0;
}
