// openassessment: utilities - extends
// ====================

// NOTES:
// * these are Sass-placeholders (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) that are meant for use with just openassessment UI


// --------------------
// typography: subheading
// --------------------
%t-superheading {
  @extend %hd-2;
  @extend %t-strong;
}

%t-heading {
  @extend %hd-4;
  @extend %t-strong;
}

%t-score {
  @extend %copy-4;
  @extend %t-strong;
  @extend %t-titlecase;
}


// --------------------
// UI: section
// --------------------
%ui-section {
  @include transition(all $tmg-f1 ease-in-out);
  @include transform(scale(.99));
  @include border-radius(($baseline-v/10));
  @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
  margin-bottom: $baseline-v;
  border: 1px solid $color-decorative-tertiary;
  border-top: ($baseline-v/4) solid $color-decorative-tertiary;
  padding: ($baseline-v/2) ($baseline-h/2);
  background: $bg-content;

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

  // STATE: hover and focus
  &:hover, &:focus {
    @include transform(scale(1.0));
  }

  // don't zoom on hover/focus when step has error
  &.has--error {
    &:hover, &:focus {
      @include transform(scale(.99));
    }
  }

  // STATE: is showing
  &.is--showing {
    @include transform(scale(1.0));
    @include single-box-shadow(0, 1px, 1px, 0, $shadow-l1);
  }

  // STATE: is loading
  &.is--loading {
    @include transform(scale(0.99));
    @include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
  }

  // STATE: is empty
  &.is--empty {

    &:hover, &:focus {
      @include transform(scale(0.99));
    }
  }

  // STATE: is unavailable
  &.is--unavailable {
    border-top-color: $color-unavailable;

    &:hover, &:focus {
      @include transform(scale(0.99));
    }
  }

  // STATE: is in-progress
  &.is--in-progress {
    border-top-color: $action-primary-color;
  }

  // STATE: is complete
  &.is--complete {
    border-top-color: $color-complete;
  }

  // STATE: is incomplete
  &.is--incomplete {
    border-top-color: $color-incomplete;
  }


  // STATE: has errors
  &.has--error {
    border-top-color: $color-error;
  }

  // STATE: is incomplete
  &.is--closed, &.is--incomplete {
    border-top-color: $color-incomplete;
  }
}

// --------------------
// UI: subsection
// --------------------
%ui-subsection {
  margin-bottom: $baseline-v;
}

%ui-subsection-title {
  margin-bottom: ($baseline-v/2);
  border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
  padding-bottom: ($baseline-v/2);
}

%ui-subsection-content {

  p {
    margin-bottom: $baseline-v;

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

// --------------------
// UI: well
// --------------------
%ui-well {
  @include single-box-shadow(0, 1px, 2px, 1px, $shadow-l1, inset);
  padding: $baseline-v ($baseline-h/2);
  background: $color-decorative-quinternary;
}


// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
  max-height: ($baseline-v*15);
  overflow-y: scroll;
}

%action-items {
  .response__submission__label {
    @extend %t-score;
    color: $copy-color;
    display: inline-block;
    vertical-align: middle;
    @include margin-left(($baseline-h/4));

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

  .list--actions__item {
    @include text-align(left);
    margin-top: 5px;
  }

  .action--save {
    @extend %btn--secondary;
    @extend %action-2;
    display: block;
    margin-bottom: ($baseline-v/2);
    min-width: 215px;

    @include media($bp-ds) {
      display: inline-block;
      @include margin-right(($baseline-v/2));
      margin-bottom: 0;
    }

    @include media($bp-dm) {
      display: inline-block;
      @include margin-right(($baseline-v/2));
      margin-bottom: 0;
    }

    @include media($bp-dl) {
      display: inline-block;
      @include margin-right(($baseline-v/2));
      margin-bottom: 0;
    }

    @include media($bp-dx) {
      display: inline-block;
      @include margin-right(($baseline-v/2));
      margin-bottom: 0;
    }
  }
}

// --------------------
// UI: rubric
// --------------------
// rubric question
%ui-rubric-question {
  @include clearfix();
  margin-bottom: ($baseline-v*2);
  @extend %wipe-last-child;

  .question__title {
    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;
    display: inline;
  }
}

//  rubric answers
%ui-rubric-answers {
  margin-top: $baseline-v;
  margin-bottom: $baseline-v;
  @include margin-left(($baseline-h/2));

  .answer, .answer--feedback {
    @include row();
    @extend %wipe-last-child;
    margin-bottom: ($baseline-v/2);
    border-bottom: ($baseline-v/20) solid $color-decorative-quaternary;
    padding-bottom: ($baseline-v/2);
  }

  .wrapper--input {
    margin-bottom: ($baseline-v/4);

    .answer__value, .answer__label {
      display: inline-block;
      vertical-align: middle;
    }

    .answer__label {
      @extend %copy-3;
      @extend %t-strong;
      margin-bottom: 0; // FIX: need to reset base label style
      color: $copy-color;
    }

    .answer__value {
      @include margin-right(($baseline-v/2));

      // STATE: checked
      &:checked {

        + .answer__label {
          color: $selected-color;
        }
      }
    }
  }

  .wrapper--metadata {
    display: block;

    @include media($bp-dm) {
      @include bidi-span-columns(8 of 12);
      margin-bottom: 0;
    }

    @include media($bp-dl) {
      @include bidi-span-columns(8 of 12);
      margin-bottom: 0;
    }

    @include media($bp-dx) {
      @include bidi-span-columns(8 of 12);
      margin-bottom: 0;
    }
  }

  .answer__tip, .answer__points {
    display: block;
  }

  .answer__tip {
    margin-bottom: ($baseline-v/2);
    white-space: pre-wrap;

    @extend %copy-3;
    @include margin-right($baseline-v);
    color: $copy-color;

    @include media($bp-dm) {
      @include bidi-span-columns(6 of 8);
      @include float(left);
      margin-bottom: 0;
    }

    @include media($bp-dl) {
      @include bidi-span-columns(6 of 8);
      @include float(left);
      margin-bottom: 0;
    }

    @include media($bp-dx) {
      @include bidi-span-columns(6 of 8);
      @include float(left);
      margin-bottom: 0;
    }

    &:after {
      content: "";
    }
  }

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

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

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

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

  .answer__points__label {
    display: inline-block; // FIX: need to reset base label style
    @include margin-left(($baseline-v/4));
    color: $copy-color;
  }

  // ELEM: criterion selects
  .answer {

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

      @include media($bp-dm) {
        @include bidi-span-columns(4 of 12);
        margin-bottom: 0;
      }

      @include media($bp-dl) {
        @include bidi-span-columns(4 of 12);
        margin-bottom: 0;
      }

      @include media($bp-dx) {
        @include bidi-span-columns(4 of 12);
        margin-bottom: 0;
      }
    }
  }

  // ELEM: open text feedback for answer
  .answer--feedback {

    .answer__label {
      margin-bottom: ($baseline-v/4);
    }

    .answer__value {
      @extend %ui-content-longanswer;
      min-height: ($baseline-v*5);
      @include margin-right(0);
    }
  }
}
