/*
 * Copyright (C) 2011 - 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/>.
 */

.react-rubric {
  border-collapse: collapse;
  page-break-inside: avoid;
}

.react-rubric table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
}

.react-rubric th.rubric-criteria {
  width: 8rem;
}

.react-rubric th.rubric-points {
  width: 6rem;
}

.react-rubric .react-rubric-cell {
  width: 100%;
}

.react-rubric thead {
  background-color: #F5F5F5;
}

.react-rubric td, .react-rubric th {
  border: 1px solid #C7CDD1;
  padding: 7px 10px;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.react-rubric th {
  padding-bottom: 14px;
}

.react-rubric th[scope="col"] {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.react-rubric th.rubric-title {
  background-color: $ic-color-medium-light;
  border-top: 1px solid $ic-border-color;
  border-#{direction(left)}: 1px solid $ic-border-color;
  border-#{direction(right)}: 1px solid $ic-border-color;
  padding: 5px;
  font-weight: bold;
}

.react-rubric .description-header {
  height: 100%;
  vertical-align: text-top;

  & .long-description button {
    margin: 0;
    padding: 0;
  }
}

.react-rubric .assessment-comments {
  margin-top: 10px;
  margin-bottom: 6px;
  margin-#{direction(left)}: 0px;
  margin-#{direction(right)}: 0px;
}

.react-rubric .react-rubric-break-words {
  word-wrap: break-word; /* for IE support */
  overflow-wrap: break-word;
}

.react-rubric .rubric-criterion td {
  vertical-align: top;
  height: 100%;
}

.react-rubric .rating-description {
  padding-bottom: 0.5em;
}

.react-rubric td.ratings {
  padding: 0;
  vertical-align: middle;
}

.react-rubric .ratings .rating-points {
  white-space: nowrap;
}

.react-rubric .rubric-freeform {
  padding: 5px;
}

.react-rubric .edit-freeform-comments-large {
  min-width: 15rem;
  padding: 1rem;
}

.react-rubric .edit-freeform-comments-small {
  padding: 0.75rem;
}

.react-rubric .rating-tier {
  padding: 7px 10px;
  border-#{direction(left)}: 1px solid #C7CDD1;
  border-top: 0;
  border-#{direction(right)}: 0;
  border-bottom: 0;
  position: relative;
  overflow: hidden;
  overflow-wrap: break-word;
}

.react-rubric .rating-tier .rating-footer {
  padding-bottom: 1rem;
}

.react-rubric .rating-tier.selected {
  .shader {
    width: 100%;
    height: 0.3em;
    position: absolute;
    bottom: 0;
    #{direction(left)}: 0;
    .triangle {
      width: 0;
      height: 0;
      border-#{direction(left)}: 0.7em solid transparent;
      border-#{direction(right)}: 0.7em solid transparent;
      border-bottom: 1em solid;
      position: relative;
      margin: 0 auto;
      bottom: 0.7em;
    }
  }

  .exceedsMasteryShader {
    background-color: #127A1B;
    .triangle {
      color: #127A1B;
    }
  }

  .meetsMasteryShader {
    background-color: $shamrock;
    .triangle {
       color: $shamrock;
    }
  }

  .nearMasteryShader {
    background-color: $fire;
    .triangle {
      color: $fire;
    }
  }

  .wellBelowMasteryShader {
    background-color: #EE0612;
    .triangle {
      color: #EE0612;
    }
  }
}

.react-rubric .rating-tier.assessing:focus,
.react-rubric .rating-tier.assessing:hover {
  background-color: #ad9;
  cursor: pointer;
}

.rating-all-footer {
    border-top: 1px solid #C7CDD1;
}

.react-rubric .graded-points {
  white-space: nowrap;
  text-align: end;
}
