//---- Assign
//---- Module Activity

.path-mod-assign [data-region="grade-actions-panel"] [data-region="grade-actions"] .collapse-buttons {
    top: auto;
    height: auto;
}

.path-mod-assign [data-region="grade-actions-panel"] {
    background-color: $container-bg;
    border-radius: $border-radius;
    border: none;

    box-shadow: rgb(0 0 0 / 15%) 0 15px 25px, rgb(0 0 0 / 5%) 0 5px 10px, rgb(0 0 0 / 12%) 0 2px 3px;

    height: 64px;
    bottom: 30px;
    left: 30px;
    right: 30px;
    width: auto;
}

// This section removes the responsiveness from the form in the grading panel
$popout-header-font-size: 1.5 * $font-size-base;
// This can't be calculated from modal-title-padding because we are mixing px and rem units.
$popout-header-height: 4rem;

.path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
    height: calc(100% - #{$popout-header-height});
}

.path-mod-assign [data-region="grade-panel"] {
    padding-top: $spacer;
    top: 145px;
    right: 30px;
    bottom: 100px;
    left: auto;

    width: calc(30% - 60px);

    border-radius: $border-radius;
    background-color: $container-bg;
}

.path-mod-assign [data-region="review-panel"].collapsed+[data-region="grade-panel"] {
    width: calc(100% - 60px);
}

.path-mod-assign [data-region="grade-panel"] .fitem>.col-md-3,
.path-mod-assign [data-region="grade-panel"] .fitem>.col-md-9 {
    width: 100%;
    padding: 0;
    max-width: 100%;
    flex: none;
}

.path-mod-assign [data-region="grade-panel"] fieldset,
.path-mod-assign [data-region="grade-panel"] .fitem.row {
    margin: 0 0 20px 0 !important;
}

.path-mod-assign [data-region="grade-panel"] .mform .fitem.has-popout .felement {
    width: 100%;
}

.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement {
    width: auto;
}

// Now styles for the popout sections.

.path-mod-assign [data-region="grade-panel"] .popout {
    background-color: $modal-content-bg;
}

.path-mod-assign [data-region="grade-panel"] .fitem.has-popout.popout {
    width: 100vw;
    max-width: 60vw;
    max-height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    overflow: auto;
    background-color: $container-bg;
    padding: 2rem !important;
    border-radius: $border-radius;
}

.theme-dark .gradingform_rubric .criterion.even td,
.theme-dark .gradingform_rubric .criterion.odd td,
.theme-dark.path-mod-assign [data-region="grade-actions-panel"],
.theme-dark.path-mod-assign [data-region="grade-panel"],
.theme-dark.path-mod-assign [data-region="grading-navigation-panel"],
.theme-dark.path-mod-assign [data-region="grade-panel"] .fitem.has-popout.popout {
    background-color: $dm-gray-100;
}

.path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
    border-bottom: $hr-border-width solid $hr-border-color;
    margin-bottom: $spacer;
}


.path-mod-assign [data-region="grade-panel"] .popout>.col-md-3 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: $popout-header-font-size;
}

.path-mod-assign [data-region="grade-panel"] .popout [data-region="popout-button"] {
    margin-top: 0;
}

// Now style the fixed header elements.

.path-mod-assign [data-region="assignment-info"] {
    overflow-y: hidden;

    position: absolute;
    top: -50px;

    justify-content: space-between;
}

.path-mod-assign [data-region="grading-navigation"] {
    padding: 0;
}

.path-mod-assign [data-region="grade-actions"] {
    padding: 10px;
}

.path-mod-assign [data-region="user-info"] {
    margin: 1rem;
    padding: 0;

    height: 40px;
    line-height: 1.2;

    color: $body-color;

    a {
        color: inherit;
    }
}

.path-mod-assign [data-region="user-info"] .img-rounded {
    margin-top: 0;
    border-radius: $border-radius;
}

.path-mod-assign [data-region="grading-navigation-panel"] {
    background-color: $container-bg;
    border-radius: $border-radius;

    box-shadow: 0 1px 1px rgb(0 0 0 / 5%), 0 2px 2px rgb(0 0 0 / 5%), 0 4px 4px rgb(0 0 0 / 5%), 0 8px 8px rgb(0 0 0 / 5%);

    top: 60px;
    left: 30px;
    right: 30px;
    z-index: 999;

    width: auto;
    height: auto;
}

@media (max-width: 767px) {
    .path-mod-assign [data-region="grading-navigation-panel"] {
        height: auto;
    }

    .path-mod-assign [data-region="user-info"] {
        margin-top: 1rem;
    }
}

.path-mod-assign [data-region="review-panel"] {
    top: 145px;
    left: 30px;
    bottom: 100px;
}

.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
    width: auto;
    display: inline-block;
}

#id_gradeheader,
#id_attemptsettings {
    font-size: $font-size-sm !important;

    border-radius: $border-radius;
    border: 2px solid $primary-color-300;

    padding: $card-spacer-x;
    margin-bottom: $card-spacer-x;

    .fcontainer {
        padding: 0;
    }

    legend,
    &>legend {
        width: auto;
        padding: 5px 20px;
        border-radius: $border-radius;
        background-color: $primary-color-600;
        color: $white;

        font-size: $font-size-sm !important;
        font-weight: $font-weight-medium !important;
        line-height: 1.5 !important;
    }

    .col-form-label {
        margin-bottom: .35rem;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
    }

    .form-control-static,
    .form-group {
        margin-bottom: .5rem;
    }

}

.gradingform {
    .custom-select {
        padding: 9px 17px;
        max-width: 100%;
        height: auto;
        font-size: $font-size-xs;
    }

    .col-form-label {
        margin-bottom: .5rem;
    }

}

.path-mod-assign [data-region="grade-panel"] .has-popout .col-md-3 {
    border-bottom: none;
}

.path-mod-assign [data-region="grade-panel"] #id_gradeheader>legend {
    visibility: visible;
    height: auto;
}

.path-mod-assign [data-region="grade-panel"] .fitem>.col-md-3,
.path-mod-assign [data-region="grade-panel"] .fitem>.col-md-9 {
    margin-bottom: .35rem!important;
    text-align: left !important;
}

.path-mod-assign #page-content [data-region="grade-panel"] [data-region="popout-button"] {
    float: none;

    .icon {
        margin: 1px;
        @extend .btn-special-icon;
    }

    a:hover {
        text-decoration: none;

        .icon {
            @extend .btn-special-icon--hover;
        }
    }
}

/**
 * Assign feedback.
 */
.assignfeedback_editpdf_widget * {
    box-sizing: content-box;
}

.assignfeedback_editpdf_widget button {
    box-sizing: border-box;
}

.assignfeedback_editpdf_widget .commentcolourbutton img {
    border-width: 0;
}

.assignfeedback_editpdf_widget .label {
    position: relative;
    padding: $alert-padding-y $alert-padding-x;
    margin-bottom: $alert-margin-bottom;
    border: $alert-border-width solid transparent;
    @include border-radius($alert-border-radius);
    @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level));
    /* stylelint-disable-line max-line-length */
}

.assignfeedback_editpdf_menu {
    padding: 0;
}

.path-mod-assign [data-region="grade-panel"] .gradingform_guide .remark .commentchooser {
    float: none;
}

.path-mod-assign [data-region="grade-panel"] .gradingform_guide .markingguideremark {
    width: 100%;
}

.path-mod-assign [data-region="grade-panel"] .mform .fitem .felement[data-fieldtype="grading"] {
    padding-left: $spacer;
    padding-right: $spacer;
}

.path-mod-assign [data-region="grade-panel"] .showmarkerdesc,
.path-mod-assign [data-region="grade-panel"] .showstudentdesc {
    background-color: $card-bg;
}

.path-mod-assign [data-region="grade-panel"] h3 {
    font-family: $font-family-base;
}

$assign-margin: 60px;

.rui-gradingsummary {
    margin: $assign-margin 0;
}

.rui-submissionstatustable {
    padding-top: $assign-margin;
    margin-bottom: $assign-margin;
    border-top: 1px solid $border-color;

    .theme-dark & {
        border-top: 1px solid $dm-border-color;
    }

    .section & {
        padding-top: 10px;
        margin-bottom: 10px;
    }
}

.rui-plugincontentsummary,
.rui-submissionsummarytable {
    margin-bottom: $assign-margin;

    .section & {
        margin-bottom: 10px;
    }
}

.rui-plugincontentsummary:last-of-type {
    margin-bottom: 0;
}

.rui-plugincontentsummary {
    .visibleifjs .btn {
        display: inline-block;
        margin-top: 0.35rem;
        margin-left: 44px;
    }
}

.rui-info-container {
    //column-count: 3;
    column-gap: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    flex-wrap: wrap;
    margin: 0;
    padding: 0;

    .theme-dark & {
        color: $body-color;
    }

    @include media-breakpoint-only(md) {
        grid-template-columns: 1fr 1fr;
    }

    @include media-breakpoint-between(xs, sm) {
        grid-template-columns: 1fr;
    }
}


.rui-infobox-title {
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    word-break: break-word;

    .theme-dark & {
        color: $body-color;
    }
}

.rui-infobox {
    display: inline-grid;
    padding: 3.75rem 1.25rem 1rem 1.25rem; // 60px 20px 20px 20px
    margin-bottom: 10px;

    background-repeat: no-repeat;
    background-position: left 16px top 20px;
    background-size: 25px;

    word-break: break-all;

    border-radius: $border-radius;

    .dir-rtl & {
        background-position: right 16px top 20px;
    }

    #page-mod-assign-grader & {
        width: auto;
        height: auto;
    }

    .rui-infobox-content {
        font-size: 1.25rem; //20px
        font-weight: $font-weight-bold;
        word-break: break-word;
    }

    .rui-infobox-content--small {
        font-size: $font-size-sm;
        font-weight: $font-weight-bold;
    }

    .theme-dark & {
        mix-blend-mode: hard-light;
    }
}

.rui-infobox--hiddenfromstudents {
    background-image: url([[pix:theme|space/icon-eye-off]]);
    background-color: $gray-100;
}

.rui-infobox--participant {
    background-image: url([[pix:theme|space/icon-users]]);
    background-color: $blue-100;
}

.rui-infobox--draft,
.rui-infobox--drafts {
    background-image: url([[pix:theme|space/icon-edit]]);
    background-color: $orange-100;
}

.submissionstatussubmitted,
.submissioneditable,
.rui-badge-assign--submitted,
.rui-infobox--submitted {
    background-image: url([[pix:theme|space/icon-checked]]);
    background-color: $green-100;
}

.path-mod-assign [data-region="grade-panel"] div.submissionnotgraded,
.latesubmission,
.submissionstatus,
.path-mod-assign [data-region="grade-panel"] div.overdue,
.rui-badge-assign--noattempt,
.rui-badge-assign--overdue,
.rui-badge-assign--needgrading,
.rui-infobox--needgrading {
    background-image: url([[pix:theme|space/icon-alert-circle]]);

    background-color: #fce59c;
}

.lockedsubmission,
.rui-badge-assign--submissionlocked,
.rui-infobox--submissionlocked {
    background-image: url([[pix:theme|space/icon-lock]]);

    background-color: $red-100;
}

.rui-badge-assign--timeremaining,
.rui-infobox--duedate {
    background-image: url([[pix:theme|space/icon-calendar]]);

    background-color: $primary-color-100;
}

.submissionnoteditable,
.rui-badge-assign--noonlinesubmissions,
.rui-infobox--noonlinesubmissions,
.rui-infobox--timeremaining {
    background-image: url([[pix:theme|space/icon-alert-triangle]]);

    background-color: $yellow-200;
}

.overduesubmission,
.rui-infobox--cutofdate {
    background-image: url([[pix:theme|space/icon-alert-circle]]);

    background-color: $red-100!important;
}

//on Learning plans page
.rui-infobox--status {
    background-image: url([[pix:theme|space/icon-state]]);

    background-color: $yellow-100;
}

.rui-badge-assign-submissionstatus,
.rui-infobox--progress {
    background-image: url([[pix:theme|space/icon-progress]]);

    background-color: $gray-100;
}


.rui-submissionsummarytable,
.rui-feedbacktable {
    background-color: $gray-100;
    padding: 1.25rem; //20px
    border-radius: $border-radius;

    font-size: $font-size-sm;

    .theme-dark & {
        background-color: $dm-gray-100;
    }
}

.submissionsummarytable {
    .generaltable {
        width: max-content!important;
    }
}

.rui-feedback {
    margin-top: $assign-margin;
    margin-bottom: $assign-margin;

    .userpicture {
        border-radius: $border-radius-xl;
    }
}

.jsenabled .comment-link .icon,
.path-mod-assign.jsenabled .expandsummaryicon {
    padding: 10px;
    margin-right: .5rem;

    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 18px;
    height: 18px;

    background: $gray-100;
    color: $gray-900;
    border-radius: $border-radius;

    &:hover {
        text-decoration: none;
    }
}

.theme-dark.jsenabled .comment-link .icon,
.theme-dark.path-mod-assign.jsenabled .expandsummaryicon {
    filter: invert(1);
}

.rui-submissionaction {

    .singlebutton,
    .btn {
        width: 100%;
    }
}

.rui-assign-btns {
    margin-top: 10px;
    padding-top: $assign-margin;
    border-top: 1px solid $border-color;

    .theme-dark & {
        border-top: 1px solid $dm-border-color;
    }
}

.rui-assignsubmissio {
    margin: $assign-margin 0;
    padding: 1rem;
    background-color: $container-bg;
    border-radius: $border-radius;

    .theme-dark & {
        background-color: $dm-container-bg;
    }

}

// Feedback table
.path-mod-assign {

    .feedbacktable {
        margin-top: 0;
    }

    .fileuploadsubmission {
        a {
            color: $body-color;

            .theme-dark & {
                color: $dm-body-color;
            }
        }
    }

    .fileuploadsubmissiontime {
        margin-top: .25rem;
        margin-left: 27px;

        float: none !important;

        font-size: $font-size-xs;
        color: $body-color-light;

        .theme-dark & {
            color: $dm-body-color-light;
        }
    }

}

.path-mod-assign .gradingtable tr.unselectedrow td {
    vertical-align: top;
    background-color: transparent;
}

.path-mod-assign.jsenabled .gradingtable .c0 {
    .commands {
        display: none;
    }

    .selectall {
        display: inline-flex;
        margin-left: .5rem;
        margin-right: .5rem;
    }
}

//Selected row
.path-mod-assign .gradingtable tr.selectedrow td {
    background-color: $primary-color-100;
    vertical-align: top;
}

.path-mod-assign.jsenabled .gradingtable {
    tr {
        border-bottom: 1px solid $border-color;

        .theme-dark & {
            border-bottom: 1px solid $dm-border-color;
        }
    }
}

.path-mod-assign [data-region="user-selector"] .alignment {
    margin: 0 10px 0 0;
    width: auto;
}

.path-mod-assign [data-region="user-selector"] select {
    padding: 3px 7px;
    max-width: 100%;
    height: auto;

    font-size: $font-size-xs;
}

.path-mod-assign [data-region="grading-navigation"] [data-region="input-field"] input {
    margin: 0;
}

.path-mod-assign [data-region="configure-filters"] {
    margin-top: 48px;
    margin-left: -143px;

    width: 180px;
}

.path-mod-assign [data-region="grade-panel"] .fitem.popout {
    bottom: auto;
}

.path-mod-assign #page-content [data-region="grade-panel"] .mform:not(.unresponsive) .fcontainer .fitem.popout .felement {
    padding: 0;
}

.moodle-dialogue-base .moodle-dialogue.assignfeedback_editpdf_dropdown .moodle-dialogue-bd {
    padding: 0 !important;
}

.assignfeedback_editpdf_widget .warningmessages {
    .icon {
        margin-right: .35rem;
        width: 12px;
        height: 12px;
    }

    .warningmessages {
        display: inline-flex;
        align-items: center;
    }

}

.path-mod-assign #page-content .mform:not(.unresponsive) #fitem_id_grade.fitem .felement input {
    width: auto;
}

#fitem_id_assignfeedbackcomments_editor .col-md-3.text-right {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.badge-assign {
    padding-top: 10px;
    padding-left: 50px;
    padding-bottom: 9px;
    padding-right: 1.5rem;

    margin-bottom: .25rem;

    background-size: 18px;
    background-position: 17px;
    background-repeat: no-repeat;

    border-radius: $border-radius;

    font-weight: $font-weight-medium;
    font-size: $font-size-sm;
    line-height: 1.5;
    color: $body-color;

    .theme-dark & {
        color: $dm-body-color;
    }
}

.overduesubmission,
.submissionstatus,
.lockedsubmission,
.submissionstatussubmitted,
.latesubmission,
.submissionnoteditable,
.path-mod-assign [data-region="grade-panel"] div.submissionnotgraded,
.overdue,
.timeremaining,
.submissioneditable {
    width: max-content;
    max-width: 100%;

    padding-top: 7px;
    padding-left: 50px;
    padding-bottom: 7px;
    padding-right: 14px;

    margin-bottom: .25rem;

    background-size: 18px;
    background-position: 17px;
    background-repeat: no-repeat;

    border-radius: $border-radius;

    font-weight: $font-weight-medium;
    font-size: $font-size-sm;
    line-height: 1.5;
    color: $body-color;

    .theme-dark & {
        color: $dm-body-color;
    }
}

.editsubmissionform {
    .row {
        margin-bottom: $page-padding-global;

        &:last-of-type {
            margin-bottom: 0;
        }
    }

}

.assignfeedback_editpdf_widget .pageheader button img {
    padding: 0;
    line-height: 0;
    width: 16px;
}

.timeremaining {
    background-color: $yellow-200;
    color: $body-color!important;
}