/*
 * 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 "pages/shared/menu_tools.scss";

$context_module_border_color: $tiara;
$context_module_bg_color: $ic-color-light;

#context_modules {
  min-width: 20px;
}

.context_module {
  border: 0;
  background-color: $context_module_bg_color;
  min-width: 20px;
  margin-top: 15px;
  .links a, .reorder_module_link, .move_item_link {
    opacity: 0.5;
    text-decoration: none;
    &:hover {
      opacity: 1;
    }
  }

  .links {
    padding-#{direction(right)}: 10px;
    text-align: direction(right);
    white-space: nowrap;
  }

  .icon-minimize {
    color: $ic-color-alert;
  }

  .icon-info {
    color: var(--ic-brand-primary);
  }

  .icon-check {
    color: $ic-color-success;
  }

  .ig-row {
    display: flex;
    align-items: center;

    .module-item-status-icon {
      width: 16px;
      padding-#{direction(right)}: 10px;

      .icon-mark-as-read {
        opacity: 0.4;
      }

      + .ig-admin {
        margin-#{direction(left)}: $ic-sp;
      }
    }

    // if there is going to be nothing in the
    // .requirement-description.ig-details__item
    // element, suppress the pipe of the
    // .ig-details__item before it. (The element
    // can't be removed bc it might be updated via js.)
    &:not(.with-completion-requirements) {
      .ig-details__item:nth-last-child(2) {
        &:after {
          display: none;
        }
      }
    }
  }

  h2 .name {
    display: inline;
    position: absolute;
    #{direction(left)}: 45px;
    #{direction(right)}: 140px;
    top: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  &.student-view {
    h2 .name {
      #{direction(left)}: 20px;
    }
  }

  h2 .name {
    display: inline;
    position: absolute;
    #{direction(left)}: 45px;
    #{direction(right)}: 140px;
    top: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  &.student-view {
    h2 .name {
      #{direction(left)}: 20px;
    }
  }

  .completion_status .complete_icon,
  .locked_icon,
  .in_progress_icon,
  .progression_details_link,
  .header .links,
  .add_module_item_link,
  .manage_module,
  .delete_prerequisite_link,
  .expand_module_link,
  .collapsed,
  .context_module_item .links {
    display: none;
  }
  &.editable_context_module {
    .progression_details_link,
    .reorder_module_link,
    .add_module_item_link,
    .edit_module_link,
    .delete_module_link,
    .delete_prerequisite_link {
      display: inline;
    }
    .delete_prerequisite_link {
      text-decoration: none;
      padding-#{direction(left)}: 3px;
    }
    .header .links,
    .manage_module {
      display: block;
    }
    .completion_status {
      visibility: hidden;
    }
    .context_module_item {
      td.links {
        display: table-cell;
      }
    }
  }
  &.collapsed_module {
    .expand_module_link {
      display: inline;
    }
    .collapse_module_link,
    .content {
      display: none;
    }
    .collapsed {
      display: block;
    }
  }
  &.completed.has_requirements {
    .completion_status {
      .complete_icon {
        display: inline;
      }
      .in_progress_icon,
      .locked_icon {
        display: none;
      }
    }
  }
  &.started {
    .completion_status {
      .in_progress_icon {
        display: inline;
      }
      .complete_icon,
      .locked_icon {
        display: none;
      }
    }
  }
  &.unlocked {
    .completion_status {
      .in_progress_icon,
      .complete_icon,
      .locked_icon {
        display: none;
      }
    }
  }
  &.locked {
    .context_module_item {
      opacity: 0.5;
      .title {
        display: none;
      }
      .locked_title {
        display: inline;
      }
      .completion_requirement {
        color: #aaa;
      }
    }
    .completion_status {
      .locked_icon {
        display: inline;
      }
      .complete_icon,
      .in_progress_icon {
        display: none;
      }
    }
    .module_item_icons {
      opacity: 0.8;
    }
  }
  .manage_module, .show_hide, .progression_container {
    font-size: 0.8em;
    float: direction(left);
    padding-#{direction(left)}: 15px;
  }
  .progression_container {
    float: direction(right);
  }
  a.add-small {
    line-height: normal;
  }
  div.footer {
    @include clearfix;
    padding: 13px 10px 2px;
    margin-#{direction(left)}: 15px;
    color: #666;
  }
  .prerequisites .criterion {
    float: direction(left);
    border: 1px solid #aaa;
    background-color: #def;
    margin-#{direction(left)}: 3px;
    padding: 0.2em 4px;
    font-size: 0.8em;
    color: #444;
  }
}

.context_module_item {
  border-bottom: 1px dotted #e0e0e0;
  &.indent_0 {
    td .type_icon {
      padding-#{direction(right)}: 15px;
    }
    .outdent_item_link {
      display: none !important;
    }
  }
  &.indent_1 {
    td .type_icon {
      padding-#{direction(right)}: 15px;
    }
    .type_icon {
      padding-#{direction(left)}: 20px;
    }
  }
  &.indent_2 {
    td .type_icon {
      padding-#{direction(right)}: 15px;
    }
    .type_icon {
      padding-#{direction(left)}: 40px;
    }
  }
  &.indent_3 {
    td .type_icon {
      padding-#{direction(right)}: 15px;
    }
    .type_icon {
      padding-#{direction(left)}: 60px;
    }
  }
  &.indent_4 {
    td .type_icon {
      padding-#{direction(right)}: 15px;
    }
    .type_icon {
      padding-#{direction(left)}: 80px;
    }
  }
  &.indent_5 {
    td .type_icon {
      padding-#{direction(right)}: 15px;
    }
    .type_icon {
      padding-#{direction(left)}: 100px;
    }
    .indent_item_link {
      display: none !important;
    }
  }
  .type_icon {
    i {
      color: #777;
      display: none;
    }
    .icon-document {
      display: inline-block;
    }
  }
  &.attachment {
    .icon-document {
      display: none;
    }
    .icon-paperclip {
      display: inline-block;
    }
  }
  &.discussion_topic {
    .icon-document {
      display: none;
    }
    .icon-discussion {
      display: inline-block;
    }
  }
  &.assignment {
    .icon-document {
      display: none;
    }
    .icon-assignment {
      display: inline-block;
    }
  }
  &.quiz {
    .icon-document {
      display: none;
    }
    .icon-quiz:not(.icon-Solid) {
      display: inline-block;
    }
  }
  &.lti-quiz {
    .icon-document {
      display: none;
    }
    .icon-Solid {
      display: inline-block;
    }
  }
  &.external_url, &.context_external_tool, &.lti\/message_handler {
    .icon-document {
      display: none;
    }
    .icon-link {
      display: inline-block;
    }
  }
  &.context_module_sub_header {
    .type_icon i {
      display: none;
    }
    .completion_status {
      display: none;
    }
  }
  .completion_requirement {
    font-size: 0.8em;
    padding-#{direction(left)}: 5px;
    margin-top: -4px;
    color: #888;
    display: block;
    .requirement_type {
      display: none;
      .fulfilled {
        display: none;
      }
    }
  }
  &.min_score_requirement {
    .completion_requirement,
    .min_score_requirement {
      display: block;
    }
  }
  &.must_view_requirement {
    .completion_requirement,
    .must_view_requirement {
      display: block;
    }
  }
  &.must_mark_done_requirement {
    .completion_requirement,
    .must_mark_done_requirement {
      display: block;
    }
  }
  &.must_contribute_requirement {
    .completion_requirement,
    .must_contribute_requirement {
      display: block;
    }
  }
  &.must_submit_requirement {
    .completion_requirement,
    .must_submit_requirement {
      display: block;
    }
  }
  .complete_item_icon {
    display: none;
  }

  &.completed_item {
    .completion_requirement {
      .requirement_type {
        .fulfilled {
          display: inline;
        }
        .unfulfilled {
          display: none;
        }
      }
    }
  }
  &.after_current_position {
    .item_name {
      opacity: 0.5;
      .title {
        display: none;
      }
      .locked_title {
        display: inline;
      }
      .completion_requirement {
        color: #aaa;
      }
    }
  }
  .module_item_icons {
    text-align: direction(left);
    white-space: nowrap;
    width: 3.2em;
  }
}

#context_modules.editable {
  .context_module_item {
    &.after_current_position {
      opacity: 1;
      .title {
        display: inline-block;
      }
      .locked_title {
        display: none;
      }
    }
  }
}

.module_item_select {
  min-height: 175px;
  min-width: 200px;
  width: 100%;
}

.context_module_item {
  .item_name {
    .locked_title {
      display: none;
    }
  }
  width: 100%;
  .move_item_link, .links a {
    visibility: hidden;
  }
  .locked & {
    .title {
      display: none;
    }
    .locked_title {
      display: inline;
    }
  }
  &.context_module_sub_header {
    .title {
      display: none;
    }
    .type_icon {
      width: 0px;
    }
    .ig-type-icon {
      display: none;
    }
    .ig-info {
      margin-#{direction(left)}: $ic-sp/4;
    }
    .criterion img {
      display: none;
    }
    .locked_title {
      @include fontSize($ic-font-size--medium);
      display: inline;
      font-weight: $ic-font-weight;
    }
  }
  .links {
    width: 80px;
    vertical-align: top;
    padding-top: 2px;
  }
  &.context_module_item_hover, &:hover {
    background-color: darken($context_module_bg_color, 2.5%);
    .move_item_link, .links a {
      visibility: visible;
    }
  }
  td.points_possible_display, td.due_date_display {
    padding-top: 5px;
    vertical-align: top;
    color: #888;
    font-size: 0.8em;
    text-align: direction(left);
    white-space: nowrap;
  }
  td.points_possible_display {
    padding-#{direction(right)}: 15px;
    width: 40px;
  }
  td.due_date_display {
    padding-#{direction(right)}: 5px;
    padding-#{direction(left)}: 15px;
    width: 40px;
  }
}

.context_module_placeholder {
  height: 15px;
  border: 1px dashed #888;
  margin: 3px 0;
}

.context_module .context_module_items {
  border-collapse: collapse;
  .context_module_item {
    .move_item_link {
      display: none;
    }
    .completion_status {
      display: inline;
    }
    .links a {
      display: none;
    }
  }
  &.manageable {
    .context_module_item {
      .move_item_link {
        display: inline;
      }
      .completion_status {
        display: none;
      }
      .links a {
        display: inline;
      }
    }
  }
}

.context_module_item:not(.assignment) {
  li.assignment_menu {
    display: none;
  }
}

.context_module_item:not(.discussion_topic) {
  li.discussion_topic_menu {
    display: none;
  }
}

.context_module_item:not(.attachment) {
  li.file_menu {
    display: none;
  }
}

.context_module_item:not(.quiz) {
  li.quiz_menu {
    display: none;
  }
}

.context_module_item:not(.wiki_page) {
  li.wiki_page_menu {
    display: none;
  }
}

.context_module_item:not(.dupeable) {
  .dupe-option {
    display: none;
  }
}

div.completion_criterion_option {
  select.assignment_picker {
    width: 175px;
  }

  select.assignment_requirement_picker {
    width: 175px;
  }
}

.publish-icon button {
  @include ic-focus-base;
  border: 0;
  border-radius: 3px;
  outline: none;
  padding: 4px;
  margin-#{direction(right)}: -7px;
  &:focus {
    @include button-focus-light;
  }
}
