/*
 * 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/rubrics";

.outcomes-browser {
  min-width: 840px;
  margin-top: 0px;
  .outcomes-toolbar {
    margin-top: 0;
    background-image: none;
    border: 1px solid $ic-border-light;
    background-color: darken($lightBackground, 3%);
    padding: $ic-sp/2;
    box-sizing: border-box;
    overflow: auto;
    .manage_rubrics {
      float: direction(right);
    }
    .popover-menu {
      float: direction(right);
    }
    .search {
      float: direction(right);
    }
    .ui-button {
      i {
        margin-bottom: -3px;
      }
    }
  }
  .outcomes-main {
    height: 625px;
    padding: 0;
    overflow: hidden;
    background-color: white;
    border: 1px solid $ic-border-light;
    border-top: none;
    &::after {
      clear: both;
    }
  }
  .outcomes-sidebar {
    float: direction(left);
    height: 610px;
    width: 201px;
    background-color: $ic-color-light;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 15px;
    border: none;
    border-radius: direction-corners(0px 0px 0px 5px);
    .wrapper {
      width: 201px;
    }
  }
  .outcomes-content {
    height: 625px;
    border-#{direction(left)}: 1px solid $borderColor;
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    border: none;
    border-radius: 0px 0px 5px;
    background-color: $ic-color-light;
    .learning_outcome {
      label.span3 {
        margin-#{direction(left)}: 0px;
      }
    }
    .wrapper {
      padding: 15px;
      padding-top: 10px;
      width: 600px;
      min-height: 300px;
    }
    label {
      display: block;
      padding: 5px 0;
    }
    .outcome-calculation-method-form {
      .grid-row {
        padding: $ic-sp/2;
      }
      label {
        display: inline;
      }
    }
    .outcome_information_link i {
      margin-bottom: -3px;
    }
    .outcome-assessed-info-banner {
      margin-bottom: $ic-sp;
    }
    .outcome-assessed-info-banner-with-mastery-scale {
      margin-top: -$ic-sp;
    }
    .move_button, .edit_button, .delete_button {
      margin-#{direction(left)}: 1em;
      margin-bottom: 1em;
    }
    dl.dl-horizontal {
      dt {
        width: 140px;
      }
      dd {
        margin-#{direction(left)}: 158px;
      }
    }
  }
}

ul.outcome-level {
  padding: 0;
  margin: 0;
  border-#{direction(right)}: 1px solid #ddd;
  float: direction(left);
  height: 625px;
  width: 200px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  &.outcome-level-hover, &.outcome-level-hover li {
    background: white;
  }
  li {
    padding: 0;
    margin: 0;
    overflow: hidden;
    list-style: none;
    width: 200px;
    &:hover, &:focus {
      background-color: $ic-bg-light-primary;

      i[class*=icon-] {
        background-image: url(/images/blue/canvas-icons-16x16-blue.png);
      }
    }
    a {
      text-decoration: none;
      display: block;
      white-space: nowrap;

      padding: $ic-sp/2 $ic-sp;
      color: $ic-font-color--subdued;
      span {
        &:hover {
          text-decoration: underline;
        }
      }
    }
    &.selected {
      a {
        background-color: $ic-bg-light-primary;
        color: $ic-font-color-dark;
        position: relative;
        &::before {
          // adds blue border
          content: '';
          position: absolute;
          #{direction(left)}: 0;
          top:0;
          width: 4px;
          height: 100%;
          background: var(--ic-brand-primary);
        }
        &:hover {
          background-color: $ic-bg-light-primary;
        }
      }
      &.droppable {
        a {
          background-color: $lightBackground;
          color: #bbb;
        }
      }
    }
    &.droppable {
      a {
        background-color: $ic-bg-light-primary;
      }
    }
    span.loading-more {
      background-color: darken($lightBackground, 3%);
      text-decoration: none;
      display: block;
      white-space: nowrap;

      padding: $ic-sp/2 $ic-sp;
      color: $ic-font-color--subdued;
    }
    &[aria-grabbed=true] a, &[aria-grabbed=true] i {
      opacity: 0.75;
    }
  }
}

#import_dialog {
  padding: 0;
  margin: 0;
  .ui-dialog-buttonpane {
    margin-top: 0;
  }
}

table.criterion {
  padding: 0;
  min-width: 600px;
  margin: 2em 0;
}

table.criterion th {
  border-top: 1px solid $borderColor;
  border-#{direction(left)}: 1px solid $borderColor;
  border-#{direction(right)}: 1px solid $borderColor;
  padding: 5px;
  text-align: center;
  vertical-align: top;
  &.total {
    background-color: $lightBackground;
  }
}

table.criterion td {
  border-bottom: 1px solid $borderColor;
  border-#{direction(left)}: 1px solid $borderColor;
  border-#{direction(right)}: 1px solid $borderColor;
  padding: 5px;
  text-align: center;
  vertical-align: top;
  &.total {
    background-color: $lightBackground;
  }
}

.criterion h3, .criterion .h3, .criterion h5, .criterion .h5 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--ic-link-color);
  font-weight: normal;
  min-height: 1em;
  font-size: 1rem;
  &.total {
    font-weight: bold;
    @if $use_high_contrast {
      color: $ic-font-color-dark;
    }
  }
}

.rating-wrap {
  position: relative;
}

table.criterion .edit {
  display: none;
  min-width: 180px;
  .row-fluid {
    margin-bottom: 8px;
  }
  .buttons button {
    margin-#{direction(left)}: 4px;
  }
  .buttons .button-container {
    float: direction(right);
  }
}

.edit_rating {
  float: direction(right);
}

.outcome_rating_description {
  width: 100%;
}

table.criterion .insert {
  position: absolute;
  top: -40px;
  #{direction(right)}: -30px;
  cursor: pointer;
  a {
    @if $use_high_contrast {
      color: $ic-font-color-dark;
    }
    @else {
      color: $grayLight;
    }
    text-decoration: none;
  }
  &:hover {
    a {
      color: var(--ic-link-color);
    }
    span {
      border-top-color: var(--ic-link-color);
    }
  }
}

.arrow-icon {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0 11px;
  border-#{direction(right)}: 5px solid transparent;
  border-#{direction(left)}: 5px solid transparent;
  border-top-width: 5px;
  border-top-style: solid;
  display: block;
  @if $use_high_contrast {
    border-top-color: $ic-font-color-dark;
  }
  @else {
    border-top-color: $grayLight;
  }
}

.outcomes-points-label {
  @include fontSize(11px);
}

.outcomes-edit-row {
  text-align: direction(left);
}

.no-outcomes-warning {
  margin: 10px 40px;
}

.outcomes_narrow_text_input {
  width: 20px;
}

.outcomes-calculation-int-italics {
  font-style: italic;
}
#alignments {
  margin-#{direction(left)}: 0;
}
#alignments .alignment {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $ic-sp/2;
  border-bottom: 1px solid $ic-border-light;
}
#alignments .header {
  flex: 4;
}
#alignments .locked_alignment_link {
  color: $ic-font-color--subdued;
}
#alignments .delete_alignment_link {
  flex: 1;
}
#outcome_results_list {
  margin-#{direction(left)}: 0;
}
#outcome_results_list .outcome_result {
  list-style: none;
  padding: $ic-sp 0;
}

@media (min-width: 768px) and (max-width: 979px) {
  .outcomes-browser {
    .outcomes-content {
      .learning_outcome {
        label.span3 {
          width: 220px
        }
        input.span3 {
          width: 224px
        }
      }
    }
  }
}
