/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import "base/environment";
@import 'pages/shared/_outcome_colors';
@import "components/rubric";

// print button for grades summary page
.print-grades {
  body:not(.responsive_student_grades_page) & {
    float: direction(right);
  }
  @media print {
    display: none;
  }
}

.grading_periods_selector {
  margin-bottom: 0px;
}

.dropdowns {
  display: inline-block;

  .course_selector,
  .assignment_order {
    float: direction(left);
    margin-#{direction(right)}: $ic-sp;
  }
}
// styles for grade summary tables
#grades_summary {
  border-collapse: collapse;
  margin-top: $ic-sp;

  @media print {
    border-bottom: none;
    a {
      text-decoration: none !important;
    }
  }
}

#grades_summary thead th {
  @media print {
    text-transform: uppercase;
    font-size: $ic-font-size - 2;
    font-weight: bold;
    border-bottom: 2px solid black;
    padding-#{direction(left)}: 0;
  }
}

#grades_summary {
  .status,
  .assignment_score,
  .possible,
  .details {
    text-align: center;
  }
}

#grades_summary tr.comments td {
  border-width: 0;
  padding-#{direction(left)}: 30px;
  @media print {
    padding-#{direction(left)}: 0;
    font-style: italic;
  }
}

#grades_summary tr.rubric_assessments > td {
  border-width: 0;
  padding-#{direction(left)}: 30px;
  table.rubric {
    margin-top: 0;
    margin-bottom: 20px;
  }
}

#grades_summary tr.student_assignment.dropped td,
#grades_summary tr.student_assignment.excused td {
  opacity: 0.7;

  @if $use_high-contrast {
    opacity: 1;
  }
  @media print {
    color: black;
  }
}

#grades_summary tr.student_assignment.dropped,
#grades_summary tr.student_assignment.excused {
  & td.points_possible {
    position: relative;
    &::after {
      content: '\00d7';
      position: absolute;
      #{direction(right)}: 0;
      padding-#{direction(left)}: $ic-sp;
    }
  }
}

#grades_summary td.assignment_score {
  cursor: pointer;

  body:not(.responsive_student_grades_page) & {
    white-space: nowrap;
  }

  body.responsive_student_grades_page & {
    @include breakpoint(tablet) {
      white-space: nowrap;
    }
  }
}

#grades_summary th.possible {
  body:not(.responsive_student_grades_page) & {
    white-space: nowrap;
  }

  body.responsive_student_grades_page & {
    @include breakpoint(tablet) {
      white-space: nowrap;
    }
  }
}

#grades_summary td a, #grades_summary th a {
  @if $use_high-contrast {
    text-decoration: underline;
    &:hover, &:focus {
      text-decoration: none;
    }
  }
}

#grades_summary td.details {
  text-align: direction(right);
  padding-#{direction(left)}: 0;

  body:not(.responsive_student_grades_page) & {
    white-space: nowrap;
    min-width: 80px;  // equals 4 x 20 pixel icons
  }

  body.responsive_student_grades_page & {
    @include breakpoint(tablet) {
      white-space: nowrap;
      min-width: 80px;  // equals 4 x 20 pixel icons
    }
  }

  & a {
    color: $ic-icon-link-color;
    &:hover, &:focus {
      color: $ic-icon-link-color-hover;
    }
    &.turnitin_similarity_score {
      color: $ic-color-light;
    }
  }
}

#grades_summary th.title {
  font-weight: normal;
  border-bottom-color: $ic-border-light;
}

#grades_summary th.title .context {
  body:not(.responsive_student_grades_page) & {
    visibility: hidden;
  }

  font-size: $ic-font-size - 2;
  color: $ic-font-color-dark;
  @media print {
    visibility: visible;
    margin: 5px 0;
    padding: 0;
  }
}

body:not(.responsive_student_grades_page) {
  #grades_summary th.title .context.context_hover {
    visibility: visible;
  }
}

#grades_summary td.due {
  body:not(.responsive_student_grades_page) & {
    white-space: nowrap;
  }

  body.responsive_student_grades_page & {
    @include breakpoint(tablet) {
      white-space: nowrap;
    }
  }
}

#grades_summary tr.assignment_graded {
  .unread-grade {
    margin-#{direction(left)}: -24px;
  }
}

#grades_summary tr.final_grade {
  font-size: $ic-font-size + 6;
  font-weight: bold;
  border-top: 2px solid $ic-border-dark;

  .possible {
    font-size: $ic-font-size;
  }

  @media print {
    text-transform: uppercase;
    border-top: 2px solid black;
    font-size: $ic-font-size;
  }
}

#grades_summary tr.group_total {
  td, th[scope=row] {
    font-weight: bold;
    @media print {
      text-transform: uppercase;
      &.title .context {
        display: none;
      }
    }
  }
}

#grades_summary tr.group_total td.possible {
  font-weight: normal;
  font-size: 0.8em;
}

.revert_score_link {
  position: absolute;
  top: 0px;
  #{direction(left)}: -5px;
  display: none;
  &:hover, &:focus {
    opacity: 0.7;
  }
}

#grades_summary .tooltip {
  position: relative;
  z-index: 10;
  outline: none;
  @if $use_high_contrast {
    text-decoration: none;
  }
  .grade:hover, .grade:focus {
    text-decoration: none;
    .tooltip_wrap, .tooltip_text {
      visibility: visible;
    }
  }
  &:active {
    outline: none;
    text-decoration: none;
    .tooltip_wrap, .tooltip_text {
      visibility: visible;
    }
  }
  .tooltip_wrap, .tooltip_text {
    display: block;
    visibility: hidden;
  }
  .tooltip_wrap {
    background: url("/images/tooltip_carat.png") no-repeat left bottom;
    bottom: 15px;
    padding-bottom: 3px;
    position: absolute;
  }
  .tooltip_text {
    background-color: $ic-color-dark;
    background-position: direction(left) bottom;
    color: $ic-color-light;
    #{direction(left)}: 0px;
    max-width: 250px;
    padding: 2px 7px;
    white-space: nowrap;
    table tr td {
      background-color: transparent;
      padding: 0 2px;
      border-width: 0px;
    }
  }
  .right {
    #{direction(right)}: 0px;
    background-position: direction(right) bottom;
  }
}

#observer_user_url {
  font-size: 0.8em;
  border: 1px solid #aaa;
}

#assignments-not-weighted,
#whatif-score-description,
#student-grades-show-all,
#only_consider_graded_assignments_wrapper {
  display: block;
  margin: $ic-sp/2 0;
}

#grades_summary table.score_details_table {

  .error {
    color: $ic-color-danger;
  }

  td {
    padding-#{direction(left)}: 1em;
  }
}

a.screenreader-toggle {
  font-weight: normal;
  padding-#{direction(right)}: 5px;
}

.grade-summary-graph-component {
  position: absolute;
  top: 0;
  #{direction(left)}: 0;
  width: 0;
  overflow: hidden;
  border-style: solid;
  border-color: $ic-border-dark;
}

div.rubric-toggle {
  padding-bottom: 5px;
}

.ui-tabs .ui-tabs-panel {
  border: none;
  padding: 0;
}

.outcome-toggles {
  text-align: #{direction(right)};
  margin-top: 0.75rem;

  @include breakpoint(mini-tablet) {
    float: direction(right);
    padding-top: 0;
    position: absolute;
    #{direction(right)}: 1em;
    margin-top: -2.3em;
  }

  .btn {
    margin-#{direction(left)}: 0.75em;
  }
  a[class*=icon-]:before, a[class^=icon-]:before {
    margin: 0;
  }
}

#assignments {
  padding: 1em 0;
}

.individualStudentView .outcomeGroup {
  margin-top: 1rem;
}

$outcome-border: 1px solid #BCC2CA;

#outcomes {
  h2 {
    font-size: 1.4em;
    font-weight: bold;
  }
  .group {
    border: $outcome-border;
    border-radius: 3px;
    margin-top: 1em;
  }
  h3 {
    font-size: 1.2em;
    margin-#{direction(left)}: 1em;
    float: direction(left);
  }
  .group-description {
    cursor: pointer;
    overflow: hidden;
    padding: 10px 15px;
    &:hover {
      background-color: #f7f7f7;
    }
    &:focus {
      outline-width: 4px;
      outline-offset: -4px;
    }
    .outcome-icon i {
      line-height: 40px;
    }
    .group-title {
      margin: 0;
      @include fontSize(20px);
      line-height: 40px;
    }
    .group-status {
      float: direction(right);
      top: 8px;
      @include fontSize(30px);
      position: relative;
      strong {
        color: #2a333b;
      }
      span {
        display: block;
        @include fontSize(14px);
      }
      .pill {
        color: white;
        background-color: $gray;
        .has-mastery {
          background-color: $green;
        }
        .no-mastery {
          background-color: $grayLight;
        }
      }
    }
  }
  .exceeds > i {
    color: $exceeds-color;
  }
  .mastery > i {
    color: $mastery-color;
  }
  .near > i {
    color: $near-color;
  }
  .remedial > i {
    color: $remedial-color;
  }
  .undefined > i {
    color: #C0C0C0;
  }
  .outcomes {
    background-color: #f7f7f7;
  }
  ul {
    margin-#{direction(left)}: 0;
    list-style-type: none;
  }
  li {
    list-style-type: none;
    overflow: hidden;
    .outcome-icon {
      float: direction(left);
      margin-#{direction(right)}: 15px;
    }
  }
  li.group {
    i.collapsed-arrow {
      display: block;
    }
    i.expanded-arrow {
      display: none;
    }
  }
  li.group.expanded {
    i.collapsed-arrow {
      display: none;
    }
    i.expanded-arrow, li.outcome {
      display: block;
    }
  }
  li.outcome {
    padding: 20px 15px;
    border-top: $outcome-border;
    display: none;
    .outcome-properties {
      float: direction(left);
      width: 70%;
    }
    .description {
      color: #2a333b;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      p {
        display: inline;
      }
    }
    .title {
      font-weight: bold;
      h4 {
        padding: 0;
        margin: 0;
        font-size: inherit;
        font-weight: bold;
      }
    }
    .alignment-info {
      float: direction(right);
      text-align: direction(right);
      width: 200px;
      padding-top: 10px;
      i {
        margin: 0px 10px;
        cursor: pointer;
      }
      i:before {
        font-size: 1.5em;
      }
    }
  }
}

@media print {
  #navpills, .course_selector, .outcome-toggles {
    display: none;
  }
  #outcomes {
    .groups {
      li.group li.outcome {
        display: block;
      }
    }
  }
  .outcome-bar-wrapper {
    .bar {
      border: 1px solid black;
      padding: 3px;
      background: none !important;
      .bar-marker {
        width: 0px !important;
        border: 3px solid black;
        height: 10px !important;
      }
      .bar-progress {
        border: 1px solid black;
        background: none !important;
        &.exceeds {
          box-shadow: inset 0 0 0 1000px $exceeds-color;
        }
        &.mastery {
          box-shadow: inset 0 0 0 1000px $mastery-color;
        }
        &.near {
          box-shadow: inset 0 0 0 1000px $near-color;
        }
        &.remedial {
          box-shadow: inset 0 0 0 1000px $remedial-color;
        }
      }
    }
  }
}

.outcome-bar-wrapper {
  .bar {
    background: #e1e1e1;
    position: relative;
    .bar-marker {
      position: absolute;
      width: 3px;
      background: #f7f7f7;
      z-index: 5;
      height: 8px;
      top: 0;
    }
    .bar-progress {
      height: 8px;
      &.exceeds {
        background: $exceeds-color;
      }
      &.mastery {
        background: $mastery-color;
      }
      &.near {
        background: $near-color;
      }
      &.remedial {
        background: $remedial-color;
      }
    }
  }
  .score {
    color: #959595;
    @include fontSize(18px);
    float: direction(left);
    strong {
      color: #2a333b;
    }
  }
}

.outcome-modal {
  padding: 7px 0;
  .title {
    float: direction(left);
    font-weight: bold;
  }
  .outcome-bar-wrapper {
    float: direction(right);
    .score {
      text-align: direction(right);
      margin-#{direction(right)}: 5px;
      letter-spacing: 1px;
    }
    .bar {
      float: direction(left);
      width: 170px;
      top: 6px;
    }
  }
  .description {
    padding: 5px 0 15px;
    clear: both;
    p {
      margin: 0;
    }
  }
  .alignments ul {
    margin: 0 0 5px;
    border-top: 1px solid #d7d7d7;
  }
  .alignment {
    list-style: none;
    overflow: auto;
    border-bottom: 1px solid #ebebeb;
    line-height: 35px;
    .title {
      font-weight: normal;
    }
    .outcome-bar-wrapper {
      .bar {
        top: 13px;
      }
      .score {
        @include fontSize(14px);
      }
    }
  }
}

.ui-widget.ui-tooltip {
  max-width: 500px;
}

.student-grades-revert-guess-button {
  display: none;
  margin-bottom: 10px;
  font-size: 0.8em;
}

.turnitin_score_container {
  i {
    &.icon-empty,
    &.icon-oval-half {
      color: $ic-color-danger;
    }

    &.icon-certified {
      color: $ic-color-success;
    }
  }

  .turnitin_similarity_score {
    color: $ic-color-dark;
  }
}

.ic-Table.ic-Table--grades-summary-table th,
.ic-Table.ic-Table--grades-summary-table td {
  padding-#{direction(left)}: 0;
  padding-#{direction(right)}: 0;

  @include breakpoint(tablet) {
    padding-#{direction(left)}: $ic-sp + 2;
    padding-#{direction(right)}: $ic-sp + 2;
  }
}
