/*
 * 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 "components/ui.selectmenu";
@import "vendor/_xflex.scss";
@import "components/rubric";


.ic-Layout-contentMain {
  padding: 0;
}

// em units are required for the height, positioning and padding
// on the header bar so it will play nice when a user changes
// their browser font size to either small or very large

$gradebook_header_height: 3.5em;

#gradebook_header_container {
  height: $gradebook_header_height;
  overflow: hidden;
}

#speed_grader_loading {
  padding: 5px;
  @include fontSize(24px);
}

#gradebook_header {
  background-color: var(--ic-brand-global-nav-bgd);
  color: var(--ic-brand-global-nav-menu-item__text-color);

  padding: 0.375em 0.75em;
  @include fontSize(11px);
  min-width: 960px;
  .ui-icon {
    background-image: $iconsActive;
  }
  a {
    color: var(--ic-brand-global-nav-menu-item__text-color);
  }

  #combo_box_container {
    text-align: direction(left);
    background: transparent;
    select {
      width: 230px;
      z-index: 100;
    }
  }

  /*
   * InstUI icons determine their size from the font-size of the parent
   * element. Have the post/hide grades icon match its non-InstUI siblings.
   */
  #speed_grader_post_grades_menu_mount_point {
    cursor: pointer;
    @include fontSize(22px);

    padding: 2px 6px 2px 4px;
  }
}
.subheadContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.subheadContent--flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 2;
  min-width: 0;
  padding-#{direction(right)}: $ic-sp;
  overflow: hidden;
}
// little trick to make the icon-font and the icon svg match in size
$icon-size: 1.4rem;

.gradebookActions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-#{direction(right)}: $ic-sp;
  flex-shrink: 0;

  // sizes the icon font
  .gradebookActions__Button {
    @include overwrite-default-icon-size($icon-size);
    margin-#{direction(right)}: $ic-sp/3;
    color: var(--ic-brand-global-nav-ic-icon-svg-fill);
  }

  // sizes the svg
  .gradebookActions__Svg {
    width: $icon-size;
    height: $icon-size;
    display: block; // removes extra inline spacing
  }
}

.assignmentDetails {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding-#{direction(left)}: 20px;
  border-#{direction(left)}: 1px dotted var(--ic-brand-global-nav-menu-item__text-color);
  text-align: direction(left);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assignmentDetails__Title {
  flex: 1;
  min-width: 0;
  @include fontSize(16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.assignmentDetails__Info{
  @include fontSize(11px);
  font-weight: $ic-font-weight;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.subheadContent--flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  padding-#{direction(left)}: $ic-sp;
}
.statsMetric {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  align-self: flex-end;
  padding-#{direction(right)}: $ic-sp;
  border-#{direction(right)}: 1px dotted var(--ic-brand-global-nav-menu-item__text-color);
}
.statsMetric__Item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  margin-#{direction(right)}: $ic-sp*2;
  &:last-of-type {
    margin-#{direction(right)}: $ic-sp;
  }
}
.statsMetric__Item-value {
  @include fontSize(16px);
}
.statsMetric__Item-label {
  @include fontSize(11px);
  font-weight: $ic-font-weight;
}
.studentSelection {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-#{direction(left)}: $ic-sp;
}
.gradebookMoveToNext {
  padding: 0 $ic-sp;
  i {
    color: var(--ic-brand-global-nav-menu-item__text-color);
  }
}
.gradebookAvatar {
  height: 30px;
  max-width: 30px;
  border-radius: 30px; //match size of avatar width
  overflow: hidden;
  margin-#{direction(right)}: $ic-sp;
}
#eg-canvas-logo {
  background: url(/images/canvas/header_canvas_logo.png) no-repeat;
  position: absolute;
  top: 7px;
  #{direction(right)}: 7px;
  height: 26px;
  width: 135px;
  display: block;
}

#settings_link {
  position: relative;
  .ui-icon {
    display: inline-block;
    vertical-align: top;
  }
}

.ic-Layout-columns {
  position: static;
  z-index: 1;
}

#full_width_container {
  position: absolute;
  top: $gradebook_header_height + 0.0625em;
  bottom: 0;
  #{direction(left)}: 0;
  #{direction(right)}: 0;
  min-width: 960px;
  &.with_enrollment_notice {
    top: $gradebook_header_height + 3.3625em;
  }
}

.full_width {
  #left_side {
    width: calc(100% + 1px); // i.e., 100% + 8px (margin-left) - 7px (right_side width)
    overflow-x: hidden;
    margin-#{direction(left)}: -8px;
    #left_side_inner {
      margin-#{direction(left)}: 8px;
      width: calc(100% - 7px);
    }
  }
  #right_side {
    width: 7px;
    overflow: hidden;
  }
  #rightside_inner {
    display: none;
  }
}

.full_height {
  height: 100%;
  overflow-x: auto;
}

.media_comments_visible {
  #left_side {
    width: 100%;
    margin-#{direction(left)}: -330px;
    #left_side_inner {
      margin-#{direction(left)}: 330px;
    }
  }
  #right_side {
    width: 329px;
  }
}

#enrollment_inactive_notice, #enrollment_concluded_notice, #closed_gp_notice {
  width: 100%;
  border-bottom: 1px solid $ic-border-light;
  border-radius: 0;
  text-align: center;
}

#left_side {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: hidden;
  #{direction(left)}: 0;
  #{direction(right)}: 25%;
  #submissions_container, #left_side_inner, iframe, #doc_preview_holder, #iframe_holder, #resize_overlay {
    height: 100%;
    width: 100%;
    border: 0 none;
  }
  #resize_overlay {
    position: relative;
    top: -100%;
    z-index: 1;
  }
  h3, .h3 {
    margin: 0;
    padding: 2em;
    text-align: center;
    .subheader {
      display: block;
      font-size: 0.75em;
      line-height: 2em;
    }
  }
}

#width_resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  #{direction(left)}: 0;
  background: #bbb url("/images/splitpane_handle-ew.gif") no-repeat scroll 50% 50%;
  cursor: pointer;
  width: 7px;
  border-#{direction(right)}: 1px solid #838383;
  z-index: 2;
  &.highlight {
    background-color: #FBEC88;
  }
}

#speedgrader_iframe {
  display: block;
}

#right_side {
  width: 25%;
  position: absolute;
  top: 0;
  bottom: 0;
  #{direction(right)}: 0;
  @include fontSize(14px);

  #rubric_summary_container {
    margin-top: $ic-sp;
  }

  #rubric_assessments_list_and_edit_button_holder {
    .button-container {
      display: inline-block;
    }
  }
  div.comment {
    padding: 8px;
    @include fontSize(14px);
    border-top: 1px dotted $ic-border-light;
    background: $ic-color-light;
    &:first-of-type {
      border-top: none;
    }
    &.draft {
      background: lighten($ic-color-alert, 55%);
    }
    span.draft-marker {
      color: $red;
      padding-#{direction(right)}: 0.5em;
      flex: none;
    }
    div.comment_flex {
      display: flex;
      flex-direction: row;
      margin-bottom: 0.5em;
    }
    span.comment {
      flex: auto;
    }
    .comment_citation {
      @include fontSize(12px);
      text-align: direction(right);
    }
    .delete_comment_link, .submit_comment_button {
      flex: none;
      height: 24px;
      margin-#{direction(left)}: 0.5em;
      @if $use_high_contrast {
        color: lighten($ic-color-dark, 12%);
      }
      @else {
        color: lighten($ic-color-dark, 25%);
      }
      &:hover, &:focus {
        color: $ic-font-color-dark;
      }
    }
  }
  h2, .h2 {
    @include fontSize(14px);
    font-weight: bold;
  }
  .content_box {
    padding: $ic-sp*2;
    background: $ic-color-light;
    border-bottom: 1px solid $gray-lighter;
  }
  #rightside_inner {
    @extend %flex-1;
    overflow-y: auto;
    position: relative;
  }
  #not_gradeable_message {
    padding: 20px;
    font-size: 1.2em;
    display: none;
  }
  .submission-late-pill,
  .submission-missing-pill {
    font-size: 1rem;
  }
}

.right_side_content {
  @extend %flex;
  @extend %flex-column;
  position: absolute;
  top: 0;
  bottom: 0;
  #{direction(left)}: 8px;
  #{direction(right)}: 0;
}

#rubric_full {
  #rubric_full_resizer #rubric_full_resizer_handle {
    position: absolute;
    top: 50%;
    #{direction(left)}: 0px;
    background: transparent url("/images/splitpane_handle-ew.gif") no-repeat scroll 50% 50%;
    cursor: pointer;
    height: 20px;
    width: 7px;
  }
  a.big_link {
    display: none;
  }
  table.rubric {
    margin-top: 0;
  }
}
#submission_files_container {
  padding: $ic-sp 0;
}
#comments {
  overflow-y: auto;
  .comment {
    .avatar {
      flex-grow: 0;
      flex-shrink: 0;
      height: 24px;
      margin-#{direction(right)}: 12px;
      width: 24px;
    }
  }
}

#add_a_comment {

  #media_media_recording {
    margin: 0 -2px;
  }
  .hidden {
    display: none;
  }
  #teachers_and_submitter_will_be_notified {
    color: #888;
    @include fontSize(10px);
  }

  .attach_things {
    list-style: none;

    //Chrome has a nice bug where clicking on block element
    //inside an inline element will force the inline element
    //to keep the :active pseudo class.
    //this causes tooltips to stay open since our tooltips
    //show if the tooltip element has the :active pseudo class
    //a bug has been filed at https://code.google.com/p/chromium/issues/detail?id=391254
    .tooltip .tooltip_wrap {
      display: none;
    }
    .tooltip:hover .tooltip_wrap {
      display: block;
    }
    /////// END: fix for chrome bug.
    .prompt {
      font-weight: bold;
      line-height: 24px;
      padding-#{direction(right)}: 4px;
      float: direction(left);
    }
    button {
      float: direction(left);
      margin-#{direction(right)}: 5px;
    }
  }
  #comment_attachments {
    padding: $ic-sp/2 0;
    display: block;
    a {
      float: direction(right);
    }
  }
}

body .ui-selectmenu-dropdown {
  border-radius: 0;
  color: var(--ic-brand-global-nav-ic-icon-svg-fill) !important;
  height: 1.3125em;
  background-color: transparent;;
  background-image: none;
  border: none;
  font-weight: normal !important;
  &:hover {
    text-decoration: none !important;
  }
  .ui-selectmenu-status {
    @include fontSize(14px);
    padding: 0 20px;
    padding: direction-sides(0 0 0 20px);
    margin: direction-sides(0 20px 0 0);
    height: 1.3125em;
    .ui-icon {
      top: 3px !important;
      &:after {
        content: "\f15c";
      }
    }
  }
  .ui-selectmenu-icon {
    width: 17px;
    height: 22px;
    border: 0;
    background-image: none;
    background-position: 0 0;
    cursor: pointer;
    border: none;
    position: absolute;
    top: -1px;
    #{direction(right)}: -1px;
    margin: 0;
  }
}

body .ui-selectmenu-dropdown:hover .ui-selectmenu-icon, body .ui-state-active .ui-selectmenu-icon {
  background-position: (-17px) 0;
  color: var(--ic-brand-global-nav-ic-icon-svg-fill);
;

}

#students_selectmenu-menu {
  max-height: 400px;
  margin-top: 14px; //to get the dropdown line items to line up with the bottom of the header bar

  ul {
    margin-top: 14px; //needed to position the dropdown to fall at the exact height of the headerbar
    border-color: $ic-border-dark;
  }

  li {
    padding: 8px 6px;
    margin-bottom: 0;
    border-bottom: 1px solid $ic-border-light;

    &:last-of-type {
      border-bottom: none;
    }

    .ui-selectmenu-item-header {
      font-weight: normal;
    }
  }
  .ui-state-hover {
    text-decoration: underline;
    background-color: $ic-bg-light-neutral;
    border-bottom: 1px solid $ic-border-light;
  }
}

// override the status icon color for the first item in the dropdown
#students_selectmenu-button .ui-selectmenu-item-icon.speedgrader-selectmenu-icon:first-of-type {
  color: var(--ic-brand-global-nav-ic-icon-svg-fill);
}

.speedgrader-postgradesmenu-icon {
  color: var(--ic-brand-global-nav-ic-icon-svg-fill) !important;
}

.ui-selectmenu-item-icon {
  top: 6px !important;
  margin-top: 0 !important;
  #{direction(left)}: -3px;
}

.ui-selectmenu-item-icon.speedgrader-selectmenu-icon {
  position: absolute;
  #{direction(left)}: 0px;
  .ui-selectmenu-status & {
    top: (-0.5px) !important;
    #{direction(left)}: 4px;
  }
  .not_graded & {
    font-size: 1.7em;
    color: $orange;
  }
  .resubmitted & {
    font-size: 1.7em;
    color: $orange;
  }
  .not_gradeable & {
    font-size: 1.7em;
    color: lighten($ic-color-dark, 50%);
  }
  .graded & {
    color: $ic-color-success;
    i {
      width: 14px;
      height: 14px;

      &:before {
        font-size: 14px;
      }
    }
  }
}

.ui-selectmenu-item-header {
  color: $ic-font-color-dark;

  .not_submitted & {
    @if $use_high_contrast {
      color: lighten($ic-color-dark, 20%);
    }
    @else {
      color: lighten($ic-color-dark, 50%);
    }
  }
  .ui-selectmenu-status & {
    margin-top: 1px;
    color: var(--ic-brand-global-nav-menu-item__text-color);
  }
}

.speedgrader-selectmenu-icon + .ui-selectmenu-item-header {
  margin-#{direction(left)}: 5px;
}

.turnitin_info {
  margin-top: 3px;
  border-top: 1px solid #999999;
  padding: 3px 0;
}

#plagiarism_platform_info_container {
  padding: direction-sides(5px 20px 0px 0px);

  #plagiarism_resubmit_button {
    width: 100%;
  }
}

#submission_details {
  border-bottom: 1px solid $ic-border-light;
  a {
    @include fontSize(14px);
  }
  .on_time {
    color: #004B00;
  }
  .late {
    color: #d12f19;
    font-weight: bold;
    white-space: nowrap;
  }
  #submission_late_notice {
    color: #d12f19;
    font-weight: bold;
  }
  #submission_not_newest_notice {
    color: $orange;
    font-weight: bold;
    padding: $ic-sp/2 0;
  }
  .submission_attachment_viewed_at {
    display: inline;
  }
  .see-all-attempts {
    display: block;
    font-weight: bold;
  }
  select {
    width: 99%;
  }
  label {
    font-weight: bold;
  }
  .labelText--not-bold {
    font-weight: normal;
  }
  #submission_files_list {
    overflow: hidden;
    .submission-file {
      position: relative;
      padding: $ic-sp/2 0;
      .turnitin_score_container {
        float: direction(left);
        margin-#{direction(right)}: $ic-sp;
        margin-#{direction(left)}: 0;
      }
      .turnitin_score_container_caret {
        display: none;
      }
      .turnitin_similarity_score {
        @include fontSize(12px);
        text-align: center;
        width: 34px;
        &.submission_error, &.submission_pending {
          padding: 1px;
        }
        &:hover {
          @include fontSize(12px);
        }
      }
      .submission-file-download {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 3px;
        #{direction(right)}: 1px;
        overflow: hidden;
      }
      .submission-file-delete {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 3px;
        #{direction(right)}: 24px;
        overflow: hidden;
        font-size: 0.7rem;
      }
      .display_name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .submission-file-selected {
      background: #DCECFB url("/images/pass.png") no-repeat center left;
      font-weight: bold;
    }
  }
}

/// this is for a sub-dropdown menu for course sections
#section-menu {
  position: absolute;
  overflow: visible;
  border: 1px solid $ic-border-dark;
  margin-top: 14px; // to make it align properly with the student select dropdown
  #section-menu-link {
    display: block;
    height: 19px;
    margin-#{direction(left)}: 8px;
    padding-#{direction(left)}: 29px;
    background: url("/images/arrow_#{direction(left)}.png") no-repeat center direction(left);
    overflow: hidden;
    white-space: nowrap;
    color: $ic-font-color-dark;
    font-weight: bold;
    @include fontSize(12px);
  }
  #section_currently_showing {
    display: inline;
  }
  ul {
    position: absolute;
    top:0;
    #{direction(left)}: -200px;
    width: 200px;
    background-color: $ic-color-light;
    padding: 0;
    border-radius: 0;
    li {
      margin: 0;
      @include fontSize(12px);
      &:first-of-type {
        border-bottom: 1px solid $ic-border-light;
      }

      a {
        line-height: 24px;
        color: $ic-font-color-dark;
        &.selected {
          font-weight: bold;
        }
        &:hover {
          background: $ic-bg-light-neutral;
          text-decoration: underline;
        }
        &.ui-state-focus {
          background: $ic-bg-light-neutral;
        }
      }
    }
  }
}

.speedgrader_alert {
  position: absolute;
  #{direction(left)}: 50%;
  margin-#{direction(left)}: -150px;
  width: 300px;
  text-align: center;
}

.dialog_button {
  height: 35px;
}

#record_button div {
  margin: 0 10px;
  width: 15px;
  height: 15px;
}

#record_button[recording=false] div {
  background-color: $red;
  border-radius: 15px;
}

#record_button[recording=true] div {
  background-color: $black;
}

#text_preview {
  width: 420px;
  height: 100px;
  border: 1px solid $borderColor;
}

#interim_results {
  color: $ic-color-success;
}

.no-close {
  .ui-dialog-titlebar-close {
    display: none;
  }
}

#grading-box-extended {
  width: 35px;
  margin-bottom: 0;
  &.pass_fail_grading_type {
    width: 105px;
  }
}

#deduction-box {
  display: flex;
  margin: 0 .25em;

  &.hidden {
    display: none;
  }
  .deduction-box-labels {
    margin-#{direction(right)}: .5em;
  }
  .deduction-box-values {
    flex: 1
  }
  .error {
    color: $ic-color-danger;
    margin-#{direction(right)}: 1em;
  }
  .bold {
    font-weight: bold;
  }
}

#settings_form input[type=checkbox][disabled] + label {
  opacity: 0.5;
}

#settings_form .icon-info {
  vertical-align: -4px;
  color: var(--ic-link-color);
}

.gradebook-icon-link:hover {
  text-decoration: none;
}

#grading-box-selected-grader {
  margin-#{direction(left)}: 10px;
  font-style: italic;
}

#grading-box-points-possible {
  margin-bottom: 1em;
}

#grading_details_container {
  button {
    padding: 0;
  }
}

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

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

    &.icon-warning,
    &.icon-clock {
      cursor: pointer;
    }
  }

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