// openassessment: views - base
// ====================

// NOTES:
// * The basic view and all of its states of the openassessment xblock

.wrapper--openassessment {
  position: relative;
}

.openassessment {
  @include direction();

  // --------------------
  // general: chrome
  // --------------------
  .openassessment__title {
    @include row();
    @extend %t-regular;
  }


  // --------------------
  // overall message
  // --------------------
  .openassessment__message {
    @include row();
    background: none;
    padding: 0;
  }

  // --------------------
  // overall actions
  // --------------------
  .list--actions {
    margin-bottom: ($baseline-v/2);
    @include text-align(center);

    @include media($bp-ds) {
      @include text-align(right);
    }

    @include media($bp-dm) {
      @include text-align(right);
    }

    @include media($bp-dl) {
      @include text-align(right);
    }

    @include media($bp-dx) {
      @include text-align(right);
    }

    // STATE: actions has an error
    &.has--error {

      .message {
        margin-bottom: $baseline-v;
        @include text-align(left);
      }
    }

    .action--submit {
      @extend %btn--primary;
      @extend %action-2;
      @include margin-left($baseline-v/2);
      margin-top: ($baseline-v/2);

      .copy, .icon {
        display: inline;
      }

      .icon {
        @extend %icon-2;
      }

      .fa-caret-right:before {
        @include transform(rotate(bidi-rotate-angle(0deg)));
      }
    }
  }

  // --------------------
  // steps
  // --------------------
  .openassessment__steps {
    @extend %no-list;
    counter-reset: item; // setting counter here
  }

  .openassessment__steps__step {
    @extend %ui-section;

    // step title
    .step__title {
      display: inline;
      margin-bottom: ($baseline-v/2);
      width: 100%;
      margin-bottom: 0;

      .step__counter, .wrapper--copy {
        display: inline-block;
        vertical-align: middle;
      }

      .wrapper--copy {
        @include margin-left(($baseline-h/2));
        @include border-left(1px solid $color-decorative-tertiary);
        @include padding-left(($baseline-h/2));

        @include media($bp-m) {
          @include margin-left(0);
          @include border-left(none);
          @include padding-left(0);
        }

        @include media($bp-ds) {
          @include margin-left(0);
          @include border-left(none);
          @include padding-left(0);
        }
      }

      .step__counter {
        display: none;

        // increment: show numbers using parent list counter
        &:before {
          @extend %hd-2;
          @extend %t-strong;
          display: none;
          content: counter(item, decimal);
          counter-increment: item;
          color: $copy-color;
        }

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


          &:before {
            display: inline;
          }
        }

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


          &:before {
            display: inline;
          }
        }

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


          &:before {
            display: inline;
          }
        }
      }

      .step__label, .step__deadline {
        display: block;
      }

      .step__label {
        @extend %t-superheading;
      }

      .step__deadline {
        @extend %hd-4;
        color: $heading-color;
        margin-left: 5px;
      }
    }

    // step status
    .step__status {
      display: inline;
      margin-top: ($baseline-v/4);

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

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

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

      .step__status__value {
        border-radius: ($baseline-v/10);
        padding: ($baseline-v/4)-1 ($baseline-h/4);
        background: $color-decorative-tertiary;
        position: relative;

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

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

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

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

      .icon {
        @extend %icon-3;
        display: inline-block;
        vertical-align: baseline;
        @include margin-right(($baseline-h/4));
      }

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

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

    // step message
    .step__message {
      @include row();
      margin-bottom: $baseline-v;
    }

    // step instructions
    .step__instruction {
      @extend %copy-2;
      margin-bottom: $baseline-v;
      color: $copy-color;
    }

    // step content
    .step__content {
      margin-bottom: $baseline-v;
    }

    .step__content__section {
      margin-bottom: ($baseline-v*2);

      &:last-child {
        @extend %wipe-last-child;
      }
    }

    // STATE: step is loading
    &.is--loading {

      .step__header {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
      }

      .step__counter:before, .step__label, .step__deadline {
        color: $copy-color;
      }

      .step__status__value {
        background: $color-unavailable;

        .wrapper--anim {
          @include animation(pulse $tmg-s3 ease-in-out infinite);
        }

        .icon {
          display: inline-block;
          color: $copy-color;
        }

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

    // STATE: step is incomplete
    &.is--incomplete {

      .step__counter:before {
        border-color: $color-incomplete;
        color: $copy-color;
      }

      .step__status__value {
        background: $color-incomplete;

        .copy, .icon {
          color: $copy-color;
        }
      }
    }

    // STATE: step is unavailable
    &.is--unavailable {

      .step__counter:before, .step__label, .step__deadline {
        color: $copy-color;
      }

      .step__status__value {
        background: $color-unavailable;

        .icon {
          display: inline-block;
          color: $copy-color;
        }

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

    // STATE: step is unavailable
    &.is--waiting {

      .step__counter:before, .step__label, .step__deadline {
        color: $copy-color;
      }

      .step__status__value {
        background: $color-unavailable;

        .icon {
          display: inline-block;
          color: $copy-color;
        }

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

      .step__title .grade__value__title {
        color: $color-unavailable;
      }

      .step__instruction, .grade__value__description {
        color: $copy-color;
      }
    }

    // STATE: step is complete/submitted/graded
    &.is--complete {

      .step__counter:before {
        color: $color-complete;
      }

      .step__status__value {
        background: $color-complete;

        .icon {
          display: inline-block;
        }

        .copy, .icon {
          color: $copy-inverse-color;
        }
      }

      button {
        opacity: 1;
      }
    }

    // STATE: in-progress
    &.is--in-progress {

      .step__counter:before {
        color: $action-primary-color;
      }

      .step__status__value {
        background: $action-primary-color;

        .icon {
          display: inline-block;
        }

        .copy, .icon {
          color: $copy-inverse-color;
        }
      }

      button {
        opacity: 1;
      }
    }

    // STATE: has error
    &.has--error {

      .step__counter:before {
        border-color: rgba($color-error, 0.5);
        color: $color-error;
      }

      .step__status__value {
        background: $color-error;

        .copy, .icon {
          color: $copy-inverse-color;
        }
      }

      .step__label {
        color: $color-error;
      }
    }
  }


  // --------------------
  // ui-slidable
  // --------------------
  .ui-slidable__container {
    .ui-slidable__content {
      width: 100%;
    }

    // If there is an icon, it should rotate when clicked
    @include transition(color $tmg-f2 ease-in);
    .icon {
      @include transition(all $tmg-f2 ease-in-out 0s);
      @include transform(rotate(bidi-rotate-angle(0deg)));
    }

    &.is--initially--collapsed  {
      .ui-slidable__content {
        display: none;
      }
    }

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

      .ui-slidable__container {
        &:not(.is--showing) {
          .icon {
            @include transition(all $tmg-f2 ease-in-out 0s);
            @include transform(rotate(bidi-rotate-angle(0deg)));
          }
        }
      }
    }

    .ui-slidable {
      // Override default button styling.
      @extend %btn-reset;
      background: none;
      border-radius: ($baseline-v/4);
      padding: 5px;

      &:active, &:focus:not(:disabled), &:hover:not(:disabled) {
        background: none;
        border: none;
        box-shadow: none;
      }

      &:not([disabled]) {
        color: $action-primary-color;

        &:hover, &:focus {
          color: $action-primary-color-focus;
        }
      }

      .wrapper--copy {
        text-align: left;
      }
    }
  }

  // --------------------
  // submission
  // --------------------

  .submission__answer__part__prompt {
    @extend %ui-well;
    position: relative;
    margin: ($baseline-v/2) 0;
    border: 1px solid $color-decorative-tertiary;
    @include border-left(($baseline-h/4) solid $color-decorative-secondary);
    @include padding-left(($baseline-h*0.75));
  }

  .submission__answer__part__prompt__title {
    @extend %text-sr;
  }

  .submission__answer__part__prompt__copy {
    @extend %copy-2;
    color: $copy-color;

    > * {
      margin-bottom: $baseline-v;

      &:last-child {
        @extend %wipe-last-child;
      }
    }

    a {
      @extend %link-copy;
    }
  }

  .submission__answer__part__text__title {
    @extend %t-heading;
  }


  .submission__answer__part__text__value {
    margin: ($baseline-v/2) 0;

    &:not(textarea) {
      border: 1px solid $color-decorative-secondary;
      background-color: $white;
      padding: $baseline-v;
    }
  }

  .submission__file__description__label {
    margin-bottom: 5px;
  }

  .submission__answer__file__block {
    margin-bottom: 8px;
  }

  .submission__img__preview {
    float: left;
    margin-right: 10px;
  }

  // --------------------
  // response
  // --------------------
  .step--response {

    // response form
    .response__submission {
      padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4);
      background: $color-decorative-quaternary;
      border-radius: ($baseline-v/10);
    }

    .response__submission__content {
      @extend %action-items;

      margin-bottom: $baseline-v;

      label {
        @extend %text-sr;
      }

      .files__descriptions {
        display: none;

        .submission__file__description {
          padding-bottom: 10px;
        }
      }

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

      .submission__file__description {
        textarea {
          @extend %ui-content-longanswer;
          min-height: ($baseline-v*4);
          width: 70%;
        }
      }

      .tip {
        @extend %t-score;
        padding: ($baseline-v/4) ($baseline-h/4);
        background: $color-decorative-secondary;
        color: $copy-inverse-color;
      }
    }

    .response__submission__actions {
      @extend %action-items
    }
  }


  // --------------------
  // peer assessment
  // --------------------
  .step--peer-assessment {

    .list--peer-assessments {
      @extend %no-list;
    }

    // peer submission
    .peer-assessment__display {
      @extend %ui-subsection;
    }

    .peer-assessment__display__header {
      @include clearfix();

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

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

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

    // assessment form
    .peer-assessment__assessment {
      @extend %action-items;

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

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

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

      // genereal 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);
        }
      }
    }
  }


  // --------------------
  // self assessment
  // --------------------
  .step--self-assessment {

    // submission
    .self-assessment__display {
      @extend %ui-subsection;
    }

    .self-assessment__display__header {
      @include clearfix();
    }

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

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

    // assessment form
    .self-assessment__assessment {
      @extend %action-items;

      // 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 {

        .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);
        }
      }
    }
  }


  // --------------------
  // grade status
  // --------------------
  // TODO: clean this up - need to make sure counter doens't show when loading or in other states
  .step--grade {

    .step__title {
      @include media($bp-m) {
        @include bidi-span-columns(4 of 4);
      }

      @include media($bp-ds) {
        @include bidi-span-columns(6 of 6);
      }

      @include media($bp-dm) {
        @include bidi-span-columns(12 of 12);
      }

      @include media($bp-dl) {
        @include bidi-span-columns(12 of 12);
      }

      @include media($bp-dx) {
        @include bidi-span-columns(12 of 12);
      }

      .step__counter, .step__counter:before {
        display: none;
      }

      .wrapper--copy {
        @include margin-left(0);
        @include border-left(none);
        @include padding-left(0);
      }

      .step__label, .grade__value {
        display: inline;
        vertical-align: middle;
      }

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

      .grade__value__title {
        @extend %t-superheading;

        .grade__value__earned {
          @extend %t-strong;
        }

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

    .grade__value__description {
      @extend %copy-2;
      margin-bottom: $baseline-v;
      color: $copy-color;
    }

    .grade__summary {
      @extend %copy-2;
    }

    .grade__status {

    }

    // CASE: is not started
    &.is--unstarted {

    }

    // CASE: is incomplete
    &.is--incomplete {

    }

    // CASE: is closed
    &.is--closed {

    }
  }


  // --------------------
  // UI: submitted repsonse
  // --------------------
  .submission__answer__display__title {
    @extend %t-heading;
    margin-bottom: ($baseline-v/2);
    color: $heading-color;
  }

  .submission__answer__display__content {
    @extend %copy-3;
    @extend %ui-subsection-content;

    padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4);
    border-radius: ($baseline-v/10);
    list-style: none;

    .submission__answer__part {
      margin: ($baseline-v*1.5) 0px 0px;

      &:first-child {
        margin-top: 0px;
      }
    }
  }


  // --------------------
  // UI: displayed peer assessments
  // --------------------

  // peer review summary
  .submission__peer-evaluations {
    @extend %ui-subsection;
  }

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

  // rubric questions
  .submission__peer-evaluations__questions {
    @extend %no-list;
    @extend %ui-subsection-content;
    margin-bottom: ($baseline-v/2);

    &:last-child {
      margin-bottom: 0;
      border-bottom: none;
      padding-bottom: 0;
    }

    // individual question
    .question {
      margin-bottom: ($baseline-v*1.5);
      @extend %wipe-last-child;
    }

    .question__title {
      @include clearfix();
      margin-bottom: $baseline-v;
      border-bottom: ($baseline-v/10) solid $heading-color;
      padding-bottom: ($baseline-v/4);

      .icon {
        @extend %icon-1;
        display: inline-block;
        vertical-align: middle;
      }
    }

    .question__title__copy {
      @extend %t-heading;
      @include margin-left(($baseline-h/4));
      white-space: pre-wrap;
    }

    .question__score {
      @extend %t-score;
      @include float(right);
      @include margin-left($baseline-v);
    }

    .question__score__value {
      @extend %t-strong;
      color: $heading-color;

      &:after {
        content: "/";
        @include margin-left(($baseline-v/4));
        color: $heading-color;
      }
    }

    .question__score__potential {
      @extend %t-strong;
      color: $heading-color;

      .unit {
        @extend %t-strong;
        @include margin-left(($baseline-v/4));
      }
    }

    .question__answers {
      @extend %no-list;
      @extend %wipe-last-child;
      @include row();
      overflow: visible; // needed for ui-hints
    }

    // individual answers
    .answer {
      margin-bottom: $baseline-v;

      @include media($bp-ds) {
        @include bidi-span-columns(3 of 6);
        @include bidi-omega(2n);
      }

      @include media($bp-dm) {
        @include bidi-span-columns(4 of 12);
        @include bidi-omega(3n);
      }

      @include media($bp-dl) {
        @include bidi-span-columns(4 of 12);
        @include bidi-omega(3n);
      }

      @include media($bp-dx) {
        @include bidi-span-columns(4 of 12);
        @include bidi-omega(3n);
      }

      // CASE: self assessment
      &.self-assessment {
        @include border-left(($baseline-h/8) solid $color-decorative-quaternary);
        @include padding-left(($baseline-h/2));

        .answer__source {
          color: $color-decorative-tertiary;
        }
      }
    }

    .answer__source {
      @extend %hd-5;
      @extend %t-strong;
      @extend %t-titlecase;
      display: block;
      color: $heading-color;

      .answer__source__value-with-points {
        @extend %t-score;
        color: $heading-color;
      }
    }

    .answer__value {
      display: block;
      margin-bottom: ($baseline-v/2);
      color: $heading-color;

      .answer__value__raw {
        white-space: pre-wrap;
      }
    }

    .answer__value__value {
      @extend %hd-2;
      @extend %t-strong;
      color: $heading-color;

      .ui-hint {
        @extend %trans-color;
        color: $color-decorative-tertiary;

        // STATE: hover - needed to reset color to what's expected from _navigation.scss (TODO: clean up specificity)
        &:hover, &:focus {
          color: $action-primary-color-focus;
        }
      }
    }

    .answer__score, .answer__score__value {
      @extend %t-score;
      display: block;
      color: $heading-color;
    }
  }

  // criterion-based feedback
  .answer--feedback {

    @include media($bp-ds) {
      @include bidi-span-columns(6 of 6);
    }

    @include media($bp-dm) {
      @include bidi-span-columns(12 of 12);
    }

    @include media($bp-dl) {
      @include bidi-span-columns(12 of 12);
    }

    @include media($bp-dx) {
      @include bidi-span-columns(12 of 12);
    }

    .answer--feedback__title {
      @extend %action-2;
    }

    .answer--feedback__title__copy {
      @include margin-left(($baseline-h/4));
    }

    .answer--feedback__content {
      margin-top: ($baseline-v/4);
    }

    .action--save {
      @extend %action-button !optional
    }

    .feedback {
      @extend %no-list;
      @extend %wipe-last-child;
      margin-bottom: $baseline-v;
    }

    .feedback__source {
      @extend %hd-5;
      @extend %t-strong;
      @extend %t-titlecase;
      display: block;
      color: $heading-color;
    }

    .feedback__value {
      @extend %copy-3;
      display: block;

      .feedback__value__raw {
        white-space: pre-wrap;
      }

    }
  }


  // overall feedback form
  .submission__feedback {
    @extend %ui-subsection;
  }

  .submission__feedback__title {
    @extend %ui-subsection-title;
    @extend %t-heading;
    border-bottom-color: solid $heading-color;
    color: $heading-color;

    .icon {
      @extend %icon-1;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .submission__feedback__title__copy {
    @extend %t-heading;
    @include margin-left(($baseline-h/4));
  }

  .submission__feeedback__content {
    @extend %ui-subsection-content;
    margin-bottom: $baseline-v;
  }

  .submission__feedback__instructions {
    @extend %copy-2;
    margin-bottom: $baseline-v;
    color: $copy-color;
  }

  .submission__feedback__elements {
    padding: $baseline-v ($baseline-h/2) $baseline-v ($baseline-h/2);
    background: $color-decorative-quaternary;
    border-radius: ($baseline-v/10);
  }

  .submission__feedback__fields {
    margin-bottom: $baseline-v;

    .field {
      margin-bottom: ($baseline-v*1.5);

      &:last-child {
        margin-bottom: 0;
      }
    }

    select {
      display: block;
    }

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

  .submission__feedback__actions {
    @extend %ui-subsection-content;
    padding-top: 0;

    .list--actions {
      padding: 0;
    }
  }

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