// studio - views - course settings
// ====================
// Table of Contents
// * +Settings - Base / All
// * +Settings - Licenses

// +Settings - Base / All
// ====================
.view-settings {
  @include text-align(left);
  @include direction();

  .content-primary, .content-supplementary {
    @include box-sizing(border-box);
  }

  .content-primary {
    @extend %ui-window;
    @extend .ui-col-wide;

    padding: $baseline ($baseline*1.5);
  }

  // messages - should be synced up with global messages in the future
  .message {
    @extend %t-copy-sub1;

    display: block;
  }

  .message-status {
    @include border-top-radius(2px);
    @include box-sizing(border-box);

    @extend %t-strong;

    display: none;
    border-bottom: 2px solid $yellow;
    margin: 0 0 $baseline 0;
    padding: ($baseline/2) $baseline;
    background: $paleYellow;

    .text {
      display: inline-block;
    }

    &.error {
      border-color: shade($red, 50%);
      background: tint($red, 20%);
      color: $white;
    }

    &.confirm {
      border-color: shade($green, 50%);
      background: tint($green, 20%);
      color: $white;
    }

    &.is-shown {
      display: block;
    }
  }

  // notices - used currently for edx mktg
  .notice-workflow {
    margin-top: ($baseline);
  }

  // specific fields - settings details
  .settings-details {

    // course details that should appear more like content than elements to change
    .is-not-editable {
      label {

      }

      input, textarea {
        @extend %t-copy-lead1;
        @extend %t-strong;

        box-shadow: none;
        border: none;
        background: none;
        margin: 0;
      }
    }
  }


  // in form - elements
  .group-settings {
    margin: 0 0 ($baseline*2) 0;

    header {
      @include clearfix();

      .title-2 {
        width: flex-grid(4, 9);
        margin: 0;

        @include margin-right(flex-gutter());
        @include float(left);
      }

      .tip {
        @extend %t-copy-sub2;

        width: flex-grid(5, 9);

        @include float(right);

        margin-top: ($baseline/2);

        @include text-align(right);

        color: $gray-d1;
      }
    }

    // basic layout/elements
    .title-2 {

    }

    .title-3 {

    }

    // in form  -UI hints/tips/messages
    .header-help {
      margin: 0 0 $baseline 0;
    }

    .instructions {
      @extend %t-copy-sub1;

      margin: 0 0 $baseline 0;
    }

    .tip {
      @extend %t-copy-sub2;

      @include transition(color $tmg-f2 ease-in-out 0s);

      display: block;
      margin-top: ($baseline/4);
      color: $gray-d1;
    }

    .tip-inline {
      display: inline;

      @include margin-left($baseline/4);
    }

    .message-error {
      @extend %t-copy-sub1;

      display: block;
      margin-top: ($baseline/4);
      margin-bottom: ($baseline/2);
      color: $red;
    }

    // buttons
    .remove-item {
      @include white-button;

      @extend %t-action3;
      @extend %t-strong;
    }

    .new-button {
      @extend %t-action3;
    }

    // form basics
    .list-input {
      @extend %cont-no-list;

      .show-data{
        .heading{
          border: 1px solid #e0e0e0;
          padding: 5px 15px;
          margin-top: 5px;
        }

        .div-grade-requirements{
          border: 1px solid #e0e0e0;
          border-top: none;
          padding: 10px 15px;
          label{font-weight: 600;}

          input#entrance-exam-minimum-score-pct{
            height: 40px;
            font-size: 18px;
          }
        }
      }

      #heading-entrance-exam{
        font-weight: 600;
      }

      label[for="entrance-exam-enabled"] {
        font-size: 14px;
      }

      .field {
        margin: 0 0 ($baseline*2) 0;

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

        &.required {
          label {
            @extend %t-strong;
          }

          label::after {
            margin-left: ($baseline/4);
            content: "*";
          }
        }

        label, input, textarea {
          display: block;
        }

        label {
          @include transition(color $tmg-f2 ease-in-out 0s);

          @extend %t-copy-sub1;
          @extend %t-strong;

          margin: 0 0 ($baseline/4) 0;

          &.is-focused {
            color: $uxpl-blue-base;
          }
        }

        input, textarea {
          @extend %t-copy-base;

          @include placeholder($gray-l4);
          @include size(100%, 100%);

          padding: ($baseline/2);

          &.long {
          }

          &.short {
          }

          &.error {
            border-color: $red;
          }

          &:focus {
            + .tip {
              color: $gray-d1;
            }
          }
        }

        .input-minimum-grade {
          @include float(left);
          @include size(92%, 100%);
        }

        .minimum-grade-percentage-sign {
          @include line-height(30);

          padding-left: ($baseline/4);;
        }

        textarea.long {
          height: ($baseline*5);
        }

        input[type="checkbox"] {
          display: inline-block;
          margin-right: ($baseline/4);
          width: auto;
          height: auto;

          & + label {
            display: inline-block;
          }
        }
      }

      .field-group {
        @include clearfix();

        margin: 0 0 ($baseline/2) 0;
      }

      // enumerated/grouped lists
      &.enum {
        .field-group {
          @include box-sizing(border-box);

          border-radius: 3px;
          background: $gray-l5;
          padding: $baseline;

          &:last-child {
            padding-bottom: $baseline;
          }

          .actions {
            @include clearfix();

            margin-top: ($baseline/2);
            border-top: 1px solid $gray-l4;
            padding-top: ($baseline/2);

            .remove-item {
              float: right;
            }
          }
        }
      }
    }

    // existing inputs
    .input-existing {
      margin: 0 0 $baseline 0;

      .actions {
        margin: ($baseline/4) 0 0 0;
      }
    }

    // specific fields - basic
    &.basic {
      .list-input {
        @include clearfix();

        padding: 0 ($baseline/2);

        .field {
          margin-bottom: 0;
        }
      }

      .is-not-editable {
        input, textarea {
          padding: 0;
        }
      }

      #field-course-organization {
        float: left;
        width: flex-grid(2, 9);
        margin-right: flex-gutter();
      }

      #field-course-number {
        float: left;
        width: flex-grid(2, 9);
        margin-right: flex-gutter();
      }

      #field-course-name {
        float: left;
        width: flex-grid(5, 9);
      }

      // Credit eligibility requirements
      #credit-minimum-passing-grade {
        float: left;
        width: flex-grid(3, 9);
        margin-right: flex-gutter();
      }

      #credit-proctoring-requirements {
        float: left;
        width: flex-grid(3, 9);
        margin-right: flex-gutter();
      }

      #credit-reverification-requirements {
        float: left;
        width: flex-grid(3, 9);
      }

      // course link note
      .note-promotion-courseURL {
        box-shadow: 0 2px 1px $shadow-l1;
        border-radius: ($baseline/5);
        margin-top: ($baseline*1.5);
        border: 1px solid $gray-l2;
        padding: ($baseline/2) 0 0 0;

        .title {
          @extend %t-copy-sub1;

          margin: 0 0 ($baseline/10) 0;
          padding: 0 ($baseline/2);

          .tip {
            display: inline;
            margin-left: ($baseline/4);
          }
        }

        .copy {
          padding: 0 ($baseline/2) ($baseline/2) ($baseline/2);

          .link-courseURL {
            @extend %t-copy-lead1;

            @include box-sizing(border-box);

            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: $uxpl-blue-base;

            &:hover {
              color: $uxpl-blue-hover-active;
            }
          }
        }

        .list-actions {
          box-shadow: inset 0 1px 1px $shadow-l1;
          border-top: 1px solid $gray-l2;
          padding:  ($baseline/2);
          background: $gray-l5;

          .action-primary {
            @extend %btn-primary-blue;
            @extend %t-action3;
            @extend %t-strong;

            .icon {
              @extend %t-icon5;

              display: inline-block;
              vertical-align: middle;
              margin-top: -3px;
            }
          }
        }
      }
    }

    // specific fields - schedule
    &.schedule {
      .list-input {
        margin-bottom: ($baseline*1.5);

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

      .field-group {
        @include clearfix();

        border-bottom: 1px solid $gray-l5;
        padding-bottom: ($baseline/2);

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

        .is-not-editable {
          input, textarea {
            padding: 10px;
          }
        }

        .field {
          @include float(left);

          width: flex-grid(3, 9);
          margin-bottom: ($baseline/4);
          margin-right: flex-gutter();
        }

        .field.time {
          position: relative;

          .tip {
            position: absolute;
            top: 0;

            @include right(0);
          }
        }
      }
    }

    // specific fields - overview
    #field-course-overview {
      #course-overview {
        height: ($baseline*20);
      }

      //adds back in CodeMirror border removed due to Unit page styling of component editors
      .CodeMirror {
        border: 1px solid $gray-l2;
      }
    }

    // specific fields - video
    #field-course-introduction-video {
      .input-existing {
        @include box-sizing(border-box);

        border-radius: 3px;
        background: $gray-l5;
        padding: ($baseline/2);

        .actions {
          @include clearfix();

          margin-top: ($baseline/2);
          border-top: 1px solid $gray-l4;
          padding-top: ($baseline/2);

          .remove-item {
            float: right;
          }
        }
      }

      .actions {
        margin-top: ($baseline/2);
        border-top: 1px solid $gray-l5;
        padding-top: ($baseline/2);
      }
    }

    // specific fields - course image
    #field-course-image, #field-banner-image, #field-video-thumbnail-image {
      .current-course-image {
        margin-bottom: ($baseline/2);
        padding: ($baseline/2) $baseline;
        background: $gray-l6;
        text-align: center;

        .wrapper-course-image {
          display: block;
          width: 375px;
          height: 200px;
          overflow: hidden;
          margin: 0 auto;
          border: 1px solid $gray-l4;
          box-shadow: 0 1px 1px $shadow-l1;
          padding: ($baseline/2);
          background: $white;
        }

        .course-image {
          display: block;
          width: 100%;
          min-height: 100%;
        }

        .msg {
          @extend %t-copy-sub2;

          display: block;
          margin-top: ($baseline/2);
          color: $gray-d3;
        }
      }

      .wrapper-input {
        @include clearfix();

        width: flex-grid(9, 9);

        .input {
          float: left;
          width: flex-grid(6, 9);
          margin-right: flex-gutter();
        }

        .action-upload-image {
          @extend %ui-btn-flat-outline;

          @include float(right);

          width: flex-grid(2, 9);
          margin-top: ($baseline/4);
          padding: ($baseline/2) $baseline;
        }
      }
    }

    // specific fields - requirements
    &.requirements {
      #field-course-effort {
        width: flex-grid(3, 9);
      }
    }

    // specific fields - grading range (artifact styling)
    &.grade-range {
      margin-bottom: ($baseline*3);

      .grade-controls {
        @include clearfix();

        width: flex-grid(9, 9);
      }

      .new-grade-button {
        @include box-sizing(border-box);
        @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));

        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
        width: flex-grid(1, 9);
        height: ($baseline*2);
        position: relative;
        display: inline-block;
        margin-right: flex-gutter();
        vertical-align: middle;
        text-align: center;
        border-radius: 20px;
        border: 1px solid $darkGrey;
        background-color: #d1dae3;
        color: #6d788b;

        .icon {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -6px;
          margin-top: -6px;
        }
      }

      .grade-slider {
        @include box-sizing(border-box);

        width: flex-grid(8, 9);
        display: inline-block;
        vertical-align: middle;

        .grade-bar {
          position: relative;
          width: 100%;
          height: ($baseline*2.5);
          background: $lightGrey;

          .increments {
            position: relative;

            li {
              @include font-size(9);

              position: absolute;
              top: 52px;
              width: 30px;
              margin-left: -15px;
              text-align: center;

              &.increment-0 {
                left: 0;
              }

              &.increment-10 {
                left: 10%;
              }

              &.increment-20 {
                left: 20%;
              }

              &.increment-30 {
                left: 30%;
              }

              &.increment-40 {
                left: 40%;
              }

              &.increment-50 {
                left: 50%;
              }

              &.increment-60 {
                left: 60%;
              }

              &.increment-70 {
                left: 70%;
              }

              &.increment-80 {
                left: 80%;
              }

              &.increment-90 {
                left: 90%;
              }

              &.increment-100 {
                left: 100%;
              }
            }
          }

          .grade-specific-bar {
            height: 50px !important;
            text-align: left;
          }

          .grades {
            position: relative;

            li {
              position: absolute;
              top: 0;
              height: 50px;
              text-align: right;
              border-radius: 2px;

              &:hover,
              &.is-dragging {
                .remove-button {
                  display: block;
                }
              }

              &.is-dragging {

              }

              .remove-button {
                @extend %t-action5;

                display: none;
                position: absolute;
                top: -17px;
                right: 1px;
                height: 17px;
              }

              &:nth-child(1) {
                background: #4fe696;
              }

              &:nth-child(2) {
                background: #ffdf7e;
              }

              &:nth-child(3) {
                background: #ffb657;
              }

              &:nth-child(4) {
                background: #ef54a1;
              }

              &:nth-child(5),
              &.bar-fail {
                background: #fb336c;
              }

              .letter-grade {
                @extend %t-copy-base;
                @extend %t-strong;

                display: block;
                margin: 5px 15px 0 0;
              }

              .range {
                @include font-size(10);

                display: block;
                margin-right: ($baseline*0.75);
                line-height: 12px;
              }

              .drag-bar {
                position: absolute;
                top: 0;
                right: -1px;
                height: 50px;
                width: 2px;
                background-color: $white;
                box-shadow: -1px 0 3px rgba(0,0,0,0.1);
                cursor: ew-resize;

                @include transition(none);

                &:hover {
                  width: 6px;
                  right: -2px;
                }
              }
            }
          }
        }
      }
    }

    // specific fields - grading rules
    &.grade-rules {
      #field-course-grading-graceperiod {
        width: flex-grid(3, 9);
      }

      #field-course-minimum_grade_credit {
        width: flex-grid(4, 9);
      }

    }

    &.assignment-types {
      .list-input {
        &:last-child {
          margin-bottom: 0;
        }
      }

      .field-group {
        @include clearfix();

        width: flex-grid(9, 9);
        margin-bottom: ($baseline*1.5);
        border-bottom: 1px solid $gray-l5;
        padding-bottom: ($baseline*1.5);

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

        .field {
          display: inline-block;
          vertical-align: top;
          width: flex-grid(3, 6);
          margin-bottom: ($baseline/2);
          margin-right: flex-gutter();
        }

        #field-course-grading-assignment-shortname,
        #field-course-grading-assignment-totalassignments,
        #field-course-grading-assignment-gradeweight,
        #field-course-grading-assignment-droppable {
          width: flex-grid(2, 6);
        }
      }

      .actions {
        float: left;
        width: flex-grid(9, 9);

        .new-button {
          @extend %btn-primary-green;
        }

        .delete-button {
          margin: 0;
        }
      }
    }

    &.course-learning-info {
      .list-input {
        margin-bottom: $baseline;

        .course-settings-learning-fields {
          .field {
            .input-learning-info {
              width: flex-grid(10, 12);
              display: inline-block;
            }

            .delete-button {
              padding-bottom: 3px;
              line-height: 3.5rem;
            }
          }
        }
      }

      .actions {
        width: flex-grid(9, 9);

        .new-button {
          @extend %btn-primary-green;
        }

        .delete-button {
          margin: 0;
        }
      }
    }

    &.instructor-types {
      .list-input {
        .course-instructor-details-fields {
          .field {
            width: flex-grid(2, 6);

            &.field-course-instructor-bio {
              width: flex-grid(6, 6);
            }

            &.current-instructor-image {
              width: flex-grid(6, 6);
              text-align: left;
              padding: 0;

              .wrapper-instructor-image {
                margin: 15px auto;
              }
            }
          }
        }

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

      .field-group {
        @include clearfix();

        width: flex-grid(9, 9);
        margin-bottom: ($baseline*1.5);
        border-bottom: 1px solid $gray-l5;
        padding-bottom: ($baseline*1.5);

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

        .field {
          display: inline-block;
          vertical-align: top;
          width: flex-grid(3, 6);
          margin-bottom: ($baseline/2);
          margin-right: flex-gutter();
        }

        // specific fields - course image
        .field-course-instructor-image {
          margin-bottom: ($baseline/2);
          padding: ($baseline/2) $baseline;
          background: $gray-l5;
          text-align: left;

          .wrapper-instructor-image {
            display: block;
            width: 375px;
            height: 200px;
            overflow: hidden;
            margin: 0 auto;
            border: 1px solid $gray-l4;
            box-shadow: 0 1px 1px $shadow-l1;
            padding: ($baseline/2);
            background: $white;
          }

          .instructor-image {
            display: block;
            width: 100%;
            min-height: 100%;
          }

          .msg {
            @extend %t-copy-sub2;

            display: block;
            margin-top: ($baseline/2);
            color: $gray-l5;
          }
        }

        .wrapper-input {
          @include clearfix();

          width: flex-grid(9, 9);

          .input {
            float: left;
            width: flex-grid(6, 9);
            margin-right: flex-gutter();
          }

          .action-upload-instructor-image {
            @extend %ui-btn-flat-outline;

            float: right;
            width: flex-grid(2, 9);
            margin-top: ($baseline/4);
            padding: ($baseline/2) $baseline;
          }
        }
      }


      .actions {
        width: flex-grid(9, 9);

        .new-button {
          @extend %btn-primary-green;
        }

        .delete-button {
          margin: 0;
        }
      }
    }

    // specific fields - advanced settings
    &.advanced-policies {
      .wrapper-options {
        margin: (-$baseline/2) 0 ($baseline/2) 0;
        text-align: right;

        .wrapper-deprecated-setting {
          @include transition(opacity $tmg-f2 ease-in-out 0s);

          opacity: .5;
          position: relative;
          display: inline-block;
          border-radius: 3px;
          padding: ($baseline/4) ($baseline/2);
          background-color: $gray-l5;
          color: $gray-d2;

          &:hover {
            opacity: 1;
          }

          &.is-set {
            opacity: 1;
            background-color: $pink-l5;
            color: $pink;
          }
        }

        .deprecated-settings-toggle {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }
      }

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

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

      .course-advanced-policy-list-item {
        @include clearfix();

        position: relative;

        .title {
          @extend %t-strong;

          margin-top: ($baseline/2);
        }

        .field {
          input {
            width: 100%;
          }

          .tip {
            color: $gray-d1;
          }

          input.error {
            & + .tip {
              opacity: 0;
            }
          }
        }

        .key, .value {
          float: left;
          margin: 0 0 ($baseline/2) 0;
        }

        .key {
          width: flex-grid(3, 9);
          margin-right: flex-gutter();
        }

        .value {
          width: flex-grid(6, 9);
        }

        .actions {
          float: left;
          width: flex-grid(9, 9);

          .delete-button {
            margin: 0;
          }
        }

        &.is-deprecated {
          background-color: $pink-l5;

          .status {
            color: $pink;
          }
        }
      }

      .message-error {
        position: absolute;
        bottom: ($baseline*0.75);
      }

      // specific to code mirror instance in JSON policy editing, need to sync up with other similar code mirror UIs
      .CodeMirror {
        @extend %t-copy-base;

        @include box-sizing(border-box);

        box-shadow: 0 1px 2px $shadow-l1 inset;

        @include linear-gradient($lightGrey, tint($lightGrey, 90%));

        padding: 5px 8px;
        border: 1px solid $mediumGrey;
        border-radius: 2px;
        background-color: $lightGrey;
        font-family: $f-monospace;
        color: $baseFontColor;
        outline: 0;
        height: auto;
        min-height: ($baseline*2.25);

        &.CodeMirror-focused {
          @include linear-gradient($paleYellow, tint($paleYellow, 90%));

          outline: 0;
        }

        .CodeMirror-sizer {
          top: 4px; /* Vertical alignment for monospace font */
        }

        .CodeMirror-scroll {
          @include margin-left(-30px);
          @include margin-right(0);
          @include padding-left(30px);
          @include padding-right(0);
        }

        .CodeMirror-vscrollbar {
          @include left(0);
          @include right(auto);
        }

        // editor color changes just for JSON
        .CodeMirror-lines {
          .cm-string {
            color: #cb9c40;
          }

          pre {
            line-height: 2.0rem;
          }
        }
      }
    }
  }

  .content-supplementary {
    @extend .ui-col-narrow;
  }

  .wrapper-modal-window {
    .validation-error-modal-content {
      .error-header {
        p {
          strong {
            color: $error-red;
          }
        }
      }

      hr {
        margin: 25px 0;
      }

      .error-list {
        .error-item {
          .error-item-title {
            color: $error-red;
          }

          .error-item-message {
            width:100%;
            border: none;
            resize: none;

            &:focus {
              outline: 0;
            }
          }
        }
      }
    }
  }

  // UI: course pacing options
  .group-settings.pacing {
    .list-input {
      margin-top: $baseline/2;
      background-color: $gray-l6;
      border-radius: 3px;
      padding: ($baseline/2);
    }

    .field {
      @include margin(0, 0, $baseline, 0);

      .field-radio {
        display: inline-block;

        @include margin-right($baseline/4);

        width: auto;
        height: auto;

        & + .course-pace-label {
          display: inline-block;
        }
      }
    }
  }
}
