// openassessment: utilities - developer
// ====================

// NOTES:
// * use this area for any developer-needed or created styling that needs to be refactored into patterns or visually polished. Please list any template/view that your styles reference when definining them (example below):

// --------------------
// Views: Error
// --------------------
// .crazy-new-feature {
//   background: transparent;
// }

// --------------------
// Views: Counterbalancing XBlock workbench styling
// --------------------

// --------------------
// Views: Static HTML Page Display
// --------------------
.view--placeholder {
  background: $bg-view;
  margin: ($baseline-v*2) $baseline-h;
}

// --------------------
// Developer styles for Staff Section
// --------------------
.staff-info__status {
  .action--submit {
    @extend %btn--secondary;
    @extend %action-2;
    margin: ($baseline-v/2) ($baseline-v/2) ($baseline-v/2) ($baseline-v/2);
  }
}
.staff-info__student {
  .label {
    color: $heading-staff-color;
    margin-bottom: ($baseline-v/2);
  }

  .action--submit {
    @extend %btn--secondary;
    @extend %action-2;
    margin: ($baseline-v/2) ($baseline-v/2) ($baseline-v/2) ($baseline-v/2);
  }

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

  .title--sub {
    color: $heading-staff-color;
    margin-top: ($baseline-v/2);
    margin-bottom: ($baseline-v/2);
  }

  .student__answer__display__content {
    border: 1px solid rgba($color-decorative-staff, 0.25);
    padding: ($baseline-v/2) ($baseline-h/2) ($baseline-v/2) ($baseline-h/2);
    margin-bottom: ($baseline-v/2);
  }

  .openassessment__student-info_list {
     list-style-type: none;
   }

  .value {
    width: $max-width/2;
  }

  /**
   * The follow styles are bound for the "shame" file. This is done to override
   * LMS specific styles on HTML elements.
   */

  // 'p' elements in LMS have a color set on them.
  .student__answer__display__content p {
    color: inherit;
  }
}

// --------------------
// Developer Styles for Student Training
// --------------------
.step--student-training {

  // submission
  .student-training__display {
    @extend %ui-subsection;
  }

  .student-training__display__header {
    @include clearfix();
  }

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

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

  // assessment form
  .student-training__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;
      overflow: visible; // needed for ui-hints
    }

    // genereal feedback question
    .assessment__rubric__question--feedback {

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

  // TYPE: correct
  .message--correct {
    @extend .message--complete;
    margin-top: $baseline-v;

    &.is--hidden {
      height: 0;
      width: 0;
      padding: 0;
      margin: 0;

      .step__header {
        border-bottom: none;
      }
    }
  }

  // TYPE: incorrect
  .message--incorrect {
    @extend .message--incomplete;
    margin-top: $baseline-v;

    &.is--hidden {
      height: 0;
      width: 0;
      padding: 0;
      margin: 0;

      .step__header {
        border-bottom: none;
      }
    }
  }
}

//---------------------------
// Developer Styles for Image Submission
//---------------------------

.step--response {

  .action--upload {
    @extend %btn--secondary;
    @extend %action-2;
    text-align: center;
    float: right;
    display: inline-block;
    margin: ($baseline-v/2) 0;
    box-shadow: none;
  }

  .file--upload {
    margin: $baseline-v ($baseline-v/2);
  }
}
.self-assessment__display__header
.self-assessment__display__title,
.peer-assessment__display__header
.peer-assessment__display__title,
.submission__answer__display
.submission__answer__display__title{
  margin: 10px 0;
}


.self-assessment__display__image,
.peer-assessment__display__image,
.submission__answer__display__image{
  @extend .submission__answer__display__content;
  max-height: 400px;
  text-align: left;
  overflow: auto;
  img{
    max-height: 100%;
    max-width: 100%;
  }
}
.submission__answer__display__image
.submission--image{
  max-height: 250px;
  max-width: 100%;
}

// Developer SASS for Continued Grading.
.openassessment__steps__step {
    .action--continue--grading {
      @extend .action--submit;
    }
}
