// openassessment: elements - staff
// ====================

// NOTES:
// * staff-centric UI used for reporting/debugging

.openassessment {

  // --------------------
  // general: staff UI
  // --------------------
  .wrapper--ui-staff {
    @include single-box-shadow(0, 1px, -2px, 1px, $shadow-d1, inset);
    margin-top: ($baseline-v*2);
    @include border-radius(($baseline-v/10));
    border: 1px solid shade($color-decorative-staff, 25%);
    border-top: ($baseline-v/4) solid $color-decorative-staff;
    padding: $baseline-v ($baseline-h/2);
    background: $staff-bg;
    display: none;
  }

  .ui-staff {

    .ui-slidable {

      .icon {
        @include transition(all $tmg-f2 ease-in-out 0s);
        @include transform(rotate(bidi-rotate-angle(0deg)));
      }

      &.is--showing {
        .icon {
          @include transform(rotate(bidi-rotate-angle(90deg)));
          @include transform-origin(50% 50%);
        }
      }
    }

    .ui-slidable__content {
      padding: ($baseline-v/2) ($baseline-h/4);

      // Display as initially collapsed.
      display: none;
    }
  }

  .ui-staff__title {
    @extend %t-heading;
    color: $copy-staff-color;
  }

  .ui-staff__subtitle {
    @extend %t-heading;
    @include fontSize($f-size-medium);
    // We want to keep the collapsible headers within the staff assessment block blue
    // (because they are being displayed in the LMS color scheme). Unfortunately because of
    // that we need to add an override just for ui-staff_subtitle collapsible items.
    color: $heading-staff-color !important;
    margin-bottom: ($baseline-v/2);

    span {
      font-weight: inherit;
    }
  }

  .staff-info__title__copy {
    @extend %t-strong;
  }

  .ui-staff__content {
    margin-top: $baseline-v;
    color: $copy-staff-color;
  }

  .ui-staff__content__section {
    padding-bottom: ($baseline-v/2);
    @extend %wipe-last-child;

    .wrapper--input,
    .wrapper--content {
      padding: $baseline-v ($baseline-h/2);
      background-color: $bg-content;
    }
  }

  // --------------------
  // staff debug info
  // --------------------
  // UI - summary (statement)
  .staff-info__summary {

    .label, .value {
      @extend %hd-2;
      display: inline-block;
      vertical-align: center;
      color: $heading-staff-color;
    }

    .label {
      @include margin-right(($baseline-h/4));
    }

    .value {
      @extend %t-strong;
    }
  }

  .openassessment_student_info_form {
    margin-bottom: ($baseline-v/2);

    .list--actions__item {
      @include text-align(left);

      .action--submit-username {
        @extend %btn--secondary;

        margin-left: 0;
      }
    }
  }

  .staff-info__status__table, .staff-info__classifierset__table {
    @extend %copy-3;
    @include border-radius(($baseline-v/10));
    word-break: initial;

    .title {
      @extend %hd-2;
      @include text-align(left);
      color: $heading-staff-color;
      margin-bottom: ($baseline-v/2);
    }

    .label {
      color: $heading-staff-color;
    }

    .value {
      @extend %t-strong;
      color: $heading-staff-color;
    }

    th, td {
      border: 1px solid rgba($copy-staff-color, 0.25);
      padding: ($baseline-v/2) ($baseline-h/4);
    }

    th, td[scope] {
      @include text-align(left);

    }

    th {
      @extend %copy-4;
      @extend %t-titlecase;
    }

    thead {

    }

    tbody {

    }
  }

  // staff assessments
  .wrapper--staff-assessment {
    margin-top: ($baseline-v/2);
    padding-top: ($baseline-v/2);
    border-top: 1px solid $color-decorative-tertiary;
  }

  .staff-assessment__display {
    @extend %ui-subsection;
  }

  .staff-assessment__display__header {
    @include clearfix();

    span {
      @extend %t-strong; // FIX: needed due to DOM structure
    }

    .staff-assessment__display__title {
      @extend %t-heading;
      margin-bottom: ($baseline-v/2);
      color: $heading-secondary-color;
    }
  }

  .staff-assessment__display__response {
    @extend %ui-subsection-content;
    @extend %copy-3;
    @extend %ui-content-longanswer;
    @extend %ui-well;
    color: $copy-color;
  }

  // assessment form
  .staff-assessment__assessment {

    // fields
    .assessment__fields {
      margin-bottom: $baseline-v;
    }

    // rubric question
    .assessment__rubric__question {
      @extend %ui-rubric-question;
    }

    // rubric options
    .question__answers {
      @extend %ui-rubric-answers;
    }

    // general feedback question
    .assessment__rubric__question--feedback {

      .wrapper--input {
        margin-top: $baseline-v;
      }

      .question__title__copy {
        @include margin-left(0);
        white-space: pre-wrap;
      }

      textarea {
        @extend %ui-content-longanswer;
        min-height: ($baseline-v*5);
      }
    }
  }

  // Styling for staff grade tab ("Grade Available Responses").
  .ui-staff {

    .staff__grade__control {
      border-top: ($baseline-v/4) solid $color-decorative-tertiary;
      background: $bg-content;
      background-color: $bg-content;

      .staff__grade__header {
        margin-bottom: 0;
      }

      .staff__grade__title {
        @include text-align(left);
        @include float(none);

        padding: 0 $baseline-v;
        display: block;
        width: 100%;

        .staff__grade__show-form {
          @extend %btn-reset;
          @extend %t-superheading;
          @include fontSize($f-size-medium);

          background-color: $bg-content;
          text-transform: none;
          letter-spacing: normal;
          padding: 0;
        }
      }

      .staff__grade__status {
        display: inline-block;
        padding: 0 $baseline-v;

        @include media($bp-dm) {
          margin-top: 0;
          @include float(right);
          position: relative;
          top: -($baseline-v*2);
        }

        @include media($bp-dl) {
          margin-top: 0;
          @include float(right);
          position: relative;
          top: -($baseline-v*2);
        }

        @include media($bp-dx) {
          margin-top: 0;
          @include float(right);
          position: relative;
          top: -($baseline-v*2);
        }

        .staff__grade__value {
          border-radius: ($baseline-v/10);
          padding: ($baseline-v/4) ($baseline-h/4);
          background: $color-decorative-tertiary;
          line-height: 0;

          @include media($bp-ds) {
            display: block;
          }

          @include media($bp-dm) {
            display: block;
          }

          @include media($bp-dl) {
            display: block;
          }

          @include media($bp-dx) {
            display: block;
          }
        }

        .copy {
          @extend %t-score;
          color: $heading-color;
        }
      }

      .submit_assessment--action {
        display: inline;
      }

      .staff__grade__content {
        padding: 0;
      }
    }

    // Override the default color for h3 (for elements that can be toggled).
    .ui-slidable__control .staff__grade__title {
      color: $action-primary-color;
    }
  }

  // UI - cancel submission (action)
  .staff-info__workflow-cancellation {

    .staff-info__cancel-submission__content {

      .comments__label {
        color: $copy-secondary-color;
      }

      .cancel_submission_comments {
        width: 100%;
        min-height: ($baseline-v*5);
        text-align: left;
      }
    }
  }

  // Learner info section
  .staff-info__student__report {

     // Override default button styling.
    .ui-slidable {
      @extend %btn-reset;
      background-color: $staff-bg;
      padding: 0;
    }

    .staff-info__final__grade__table {
      margin-top: ($baseline-v/2);
    }
  }
}
