:host {
    div.latesubmission,
    div.overdue {
        // @extend .core-danger-item;
    }

    div.earlysubmission {
        // @extend .core-success-item;
    }

    div.submissioneditable p {
        color: $red;
        @include darkmode() {
            color: $red-light;
        }
    }

    .core-grading-summary .advancedgrade {
        display: none;
    }
}

core-format-text {

    .gradingform_rubric_editform .status {
        font-weight: normal;
        text-transform: uppercase;
        font-size: 60%;
        padding: 0.25em;
        border: 1px solid $gray-light;
    }

    .gradingform_rubric_editform .status.ready {
        background-color: $green-light;
        border-color: $green;
    }

    .gradingform_rubric_editform .status.draft {
        background-color: $yellow-light;
        border-color: $yellow;
    }

    .gradingform_rubric {
        overflow: auto;
        padding-bottom: 1.5em;
        max-width: 720px;
        position: relative;
        margin: 0 auto;
        tbody {
            background: $white;
            color: $text-color;
        }
    }

    // Do not display remark column.
    .gradingform_rubric .criterion .remark {
        display: none;
    }

    .gradingform_rubric.editor .criterion .controls,
    .gradingform_rubric .criterion .description,
    .gradingform_rubric .criterion .levels,
    .gradingform_rubric.editor .criterion .addlevel,
    .gradingform_rubric .criterion .remark,
    .gradingform_rubric .criterion .levels .level {
        vertical-align: top;
    }

    .gradingform_rubric.editor .criterion .controls,
    .gradingform_rubric .criterion .description,
    .gradingform_rubric.editor .criterion .addlevel,
    .gradingform_rubric .criterion .remark,
    .gradingform_rubric .criterion .levels .level {
        padding: 3px;
    }

    .gradingform_rubric .criteria {
        height: 100%;
    }

    .gradingform_rubric .criterion {
        border: 1px solid $gray;
        overflow: hidden;
    }

    .gradingform_rubric .criterion.even {
        background: $gray-lighter;
    }

    .gradingform_rubric .criterion .description {
        width: 150px;
        font-weight: bold;
    }

    .gradingform_rubric .criterion .levels table {
        width: 100%;
        height: 100%;
    }

    .gradingform_rubric .criterion .levels,
    .gradingform_rubric .criterion .levels table,
    .gradingform_rubric .criterion .levels table tbody {
        padding: 0;
        margin: 0;
    }

    .gradingform_rubric .criterion .levels .level {
        border-left: 1px solid $gray;
        max-width: 150px;
    }

    .gradingform_rubric .criterion .levels .level .level-wrapper {
        position: relative;
    }

    .gradingform_rubric .criterion .levels .level.last {
        border-right: 1px solid $gray;
    }

    .gradingform_rubric .plainvalue.empty {
        font-style: italic;
        color: $gray-dark;
    }

    .gradingform_rubric.editor .criterion .levels .level .delete {
        position: absolute;
        right: 0;
    }

    .gradingform_rubric .criterion .levels .level .score {
        font-style: italic;
        color: $green;
        font-weight: bold;
        margin-top: 5px;
        white-space: nowrap;
    }

    .gradingform_rubric .criterion .levels .level .score .scorevalue {
        padding-right: 5px;
    }

    /* Make invisible the buttons 'Move up' for the first criterion and
       'Move down' for the last, because those buttons will make no change */
    .gradingform_rubric.editor .criterion.first .controls .moveup input,
    .gradingform_rubric.editor .criterion.last .controls .movedown input {
        display: none;
    }

    /* evaluation */
    .gradingform_rubric .criterion .levels .level.currentchecked {
        background: #fff0f0;
    }

    .gradingform_rubric .criterion .levels .level.checked {
        background: $green-light;
        border: 1px solid $gray-darker;
    }

    .gradingform_rubric .options .optionsheading {
        font-weight: bold;
        font-size: 1.1em;
        padding-bottom: 5px;
    }

    .gradingform_rubric .options .option {
        padding-bottom: 2px;
    }

    .gradingform_rubric .options .option label {
        margin-left: 5px;
    }

    .gradingform_rubric .options .option .value {
        margin-left: 5px;
        font-weight: bold;
    }

    .gradingform_rubric .criterion .levels.error {
        border: 1px solid $red;
    }

    .gradingform_rubric .criterion .description.error,
    .gradingform_rubric .criterion .levels .level .definition.error,
    .gradingform_rubric .criterion .levels .level .score.error {
        background: $gray-lighter;
    }

    .gradingform_rubric-regrade {
        padding: 10px;
        background: $gray-lighter;
        border: 1px solid $red-light;
        margin-bottom: 10px;
    }

    .gradingform_rubric-restored {
        padding: 10px;
        background: $yellow-light;
        border: 1px solid $yellow;
        margin-bottom: 10px;
    }

    .gradingform_rubric-error {
        color: $red;
        font-weight: bold;
    }

    /* special classes for elements created by rubriceditor.js */
    .gradingform_rubric.editor .hiddenelement {
        display: none;
    }

    .gradingform_rubric.editor .pseudotablink {
        background-color: transparent;
        border: 0 solid;
        height: 1px;
        width: 1px;
        color: transparent;
        padding: 0;
        margin: 0;
        position: relative;
        float: right;
    }

    .gradingform_rubric {
        padding-bottom: 0;
        max-width: none;
    }

    .gradingform_rubric .criterion .description {
        font-weight: 500;
        min-width: 150px;
    }

    .gradingform_rubric .criterion .levels {
        background-color: $white;
    }

    .gradingform_rubric .criterion,
    .gradingform_rubric .criterion.even {
        background-color: transparent;
    }

    .gradingform_rubric.evaluate .criterion .levels .level:hover {
        background-color: $green-light;
    }

    .gradingform_rubric .criterion .levels .level.checked {
        background-color: $green-light;
        border: none;
        border-left: 1px solid $gray;
    }

    .gradingform_rubric .criterion .levels .level .score {
        color: $green;
        font-weight: 500;
        font-style: normal;
        margin-top: 20px;
    }

    .gradingform_rubric .criterion .remark textarea {
        margin-bottom: 0;
    }
}