// studio - views - course outline
// ====================

.view-outline {

  // page structure
  .content-primary,
  .content-supplementary {
    @include box-sizing(border-box);
    float: left;
  }

  .content-primary {
    width: flex-grid(9, 12);
    margin-right: flex-gutter();

    .no-outline-content {
      @extend %ui-well;
      padding: ($baseline*2);
      background-color: $gray-l4;
      text-align: center;
      color: $gray;

      .new-button {
        @include font-size(14);
        margin-left: $baseline;

        [class^="icon-"] {
          margin-right: ($baseline/2);
        }
      }
    }
  }

  .content-supplementary {
    width: flex-grid(3, 12);
  }


  // page header bits
  .toggle-button-sections {
    @extend %t-copy-sub2;
    position: relative;
    display: none;
    float: right;
    margin-top: ($baseline/4);
    color: $gray-l1;

    &.is-shown {
      display: block;
    }

    .label {
      display: inline-block;
    }
  }


  // new section, subsection, unit
  .new-section-name,
  .new-subsection-name-input {
    @include font-size(16);
    display: inline-block;
    width: 515px;
    padding: ($baseline/4);
    vertical-align: top;
  }

  .new-subsection-name-input {
    @include font-size(14);
  }
  .new-section-name-save,
  .new-subsection-name-save {
    @include blue-button;
    margin: 0 5px;
    padding: 4px 20px 7px;
    color: $white;
  }

  .new-section-name-cancel,
  .new-subsection-name-cancel {
    @include white-button;
    padding: 4px 20px 7px;
    color: $gray-l1;
  }

  .new-subsection-item,
  .new-unit-item {
    @extend %ui-btn-flat-outline;
    width: 100%;
    margin: 0 0 ($baseline/2) 0;
    border: 1px solid $gray-l3;
    padding: ($baseline/2) 0;
    color: $gray-l2;


    &:hover {
      box-shadow: none;
      background-image: none;
    }
  }

  .courseware-unit-new {
    margin-right: ($baseline*1.5);
  }


  // UI: general action list styles (section and subsection)

  .expand-collapse {
    @extend %expand-collapse;
    margin: 0 ($baseline/4);
  }

  // UI: element actions list
  // TODO: outline page can be updated to reflect styling from %actions-header extend in _controls.scss
  .actions-list {
    display: inline-block;
    margin-bottom: 0;
  }

  .actions-item {
    @include font-size(13);
    display: inline-block;
    padding: 0 ($baseline/5);
    vertical-align: middle;

    .action {
      min-width: ($baseline*.75);
      color: $gray-l2;

      &:hover,
      &.is-set {
        color: $blue;
        visibility: visible;
      }

      //reset old drag handle style
      &.drag-handle {
        float: none;
        margin: 0;
        background: transparent url(../img/drag-handles.png) right 5px no-repeat;
        text-align: center;
      }

    }
  }


  // section styles
  .courseware-section {
    @extend %ui-window;
    @include transition(background $tmg-avg ease-in-out 0);
    position: relative;
    padding: ($baseline*1.5) $baseline $baseline $baseline;

    &.collapsed {
      padding-bottom: 0;
    }

    &.collapsed .subsection-list,
    .collapsed .subsection-list,
    .collapsed > ol {
        display: none !important;
    }

    &.new-section {
      padding: ($baseline*1.5) $baseline 0 $baseline;

      header {
        @include clearfix();
        height: auto;
        border-bottom: 0;

        .expand-collapse {
          display: none;
        }

        .item-details {
          width: auto;

          .section-name {
            float: none;
            width: 100%;
          }
        }
      }
    }

    .section {
      @include clearfix();
      min-height: 65px; // needed to align with edit input
      margin-bottom: 0;
      border: 0;
      padding: 0;

      // section name area
      .item-details {
        @include clearfix();
        width: 400px;
        float: none;
        display: inline-block;
        padding: 0 0 ($baseline/2) 0;

        .section-name {
          @include font-size(19);
          margin-right: ($baseline/2);
        }

        .section-name-span {
          @include transition(color $tmg-f2 linear 0s);
          cursor: pointer;

          &:hover {
            color: $blue;
          }
        }

        .section-name-edit {
          position: relative;
          width: ($baseline*20);
          background: $white;

          input {
            @include font-size(16);
          }

          .save-button {
            @include blue-button;
            padding: 7px $baseline 7px;
            margin-right: ($baseline/4);
          }

          .cancel-button {
            @include white-button;
            padding: 7px $baseline 7px;
          }
        }
      }


      // section specific action styles
      .item-actions {
        position: relative;
        display: inline-block;
        float: right;
        margin-bottom: ($baseline/2);
        top: 0;
      }

      .actions-item {
        padding: 0 0 0 8px;

        &:last-child {
          padding-right: 4px;
        }

        &.pubdate {
          padding-right: 0;
        }

        .action {

          &.pubdate {
            visibility: hidden;
          }

          &:hover,
          &.is-set {
            color: $blue;
            visibility: visible;
          }
        }

        .section-published-date {
          padding: ($baseline/5) ($baseline/2);
          border-radius: 3px;
          background: $gray-l5;
          text-align: right;

          .published-status {
            @include font-size(12);
            margin-right: 15px;

            strong {
              font-weight: bold;
            }
          }

          &.released .section-published-date {
            background-color: transparent;
            color: $gray-l1;

            a {
              color: $gray-l2;

              &:hover {
                color: $blue;
              }
            }
          }
        }
      }
    }
  }


  // subsection styles
  .courseware-subsection {
    @include clearfix();
    padding: 3px 0;

    &.visible {
      border-left: 5px solid $green;
    }

    &.mixed {
      border-left: 5px solid $yellow-s1;
    }

    .status {
      @extend %cont-text-sr;
    }

    .section-item {
      @include transition(background $tmg-avg ease-in-out 0);
      @include font-size(13);
      position: relative;
      display: block;
      background-color: $gray-l5;
      padding: 6px 8px 8px 16px;

      &:hover {
        background: $blue-l5;

        .item-actions {
          display: block;
        }
      }

      &.editing {
        background: $orange-l4;
      }
    }

    .details {
      display: block;
      margin-bottom: 0;
      width: 600px;

      a {
        color: $baseFontColor;
      }
    }
  }

  // gradable drop down
  .gradable-status {
    display: inline-block;
    position: relative;

    .status-label {
      @include font-size(12);
      width: 110px;
      padding: 5px 40px 5px 10px;
      border-radius: 3px;
      color: transparent;
      text-align: right;
      font-weight: bold;
      line-height: 16px;
    }

    .menu-toggle {
      @extend %ui-depth1;
      position: absolute;
      top: 0;
      right: 5px;
      padding: 2px 5px;
      color: $gray-l2;

      &:hover,
      &.is-active {
        color: $blue;
      }

      &:focus {
        outline: 0;
      }
    }


    // gradable dropdown menu default
    .menu {
      @include font-size(12);
      @include transition(opacity $tmg-f2 linear 0s);
      display: none;
      opacity: 0.0;
      z-index: 1;
      position: absolute;
      top: -4px;
      right: 0;
      margin: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
      border: 1px solid $gray-l2;
      border-radius: 4px;
      padding: 8px 12px;
      background: $white;

      li {
        width: 115px;
        margin-bottom: 3px;
        border-bottom: 1px solid $gray-l4;
        padding-bottom: 3px;

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

          .gradable-status-notgraded {
            color: $gray;
          }
        }
      }

      a {
        color: $blue;

        &.is-selected {
          font-weight: bold;
        }
      }
    }

    // gradable dropdown state
    &.is-active {

      .menu {
        @extend %ui-depth3;
        display: block;
        opacity: 1.0;
      }

      .menu-toggle {
        @extend %ui-depth4;
      }
    }

    // set state
    &.is-set {

      .menu-toggle {
        color: $blue;
      }

      .status-label {
        display: block;
        color: $blue;
      }
    }
  }

  .courseware-subsection .sortable-unit-list {
    margin: ($baseline/4) 0 0 0;
  }

  // unit styles
  .courseware-unit {
    margin: -1px 0 0 ($baseline*1.75);

    &.add-new-unit {
      margin: 5px ($baseline*1.75) 0 ($baseline*1.75);
    }

    .section-item {
      border: 0;
      background-color: $white;
    }

    .public-item {
      color: $black;
    }

    .private-item {
      color: $gray-l1;
    }

    .draft-item {
      color: $yellow-d1;
    }

    .draft-item:after,
    .public-item:after,
    .private-item:after {
      @include font-size(9);
      margin-left: 3px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .draft-item:after {
      content: "- draft";
    }

    .private-item:after {
      content: "- private";
    }
  }



  // modal to edit section publish settings
  // basic non-backbone modal-window set-up
  .wrapper-modal-window {
    @extend %ui-depth4;
    @include transition(all $tmg-f2 ease-in-out);
    visibility: hidden;
    pointer-events: none;
    display: none;
    position: absolute;
    top: 0;
    overflow: scroll;
    background: $black-t2;
    width: 100%;
    height: 100%;
    text-align: center;

    &:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em; /* Adjusts for spacing */
    }

    .modal-window {
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      opacity: 0;
    }
  }

  // modal-window showing/hiding
  &.modal-window-is-shown {
    overflow: hidden;

    .wrapper-modal-window.is-shown {
      visibility: visible;
      pointer-events: auto;
      display: block;

      .modal-window {
        opacity: 1.0;
      }
    }
  }

  .edit-section-publish-settings {

    .picker {
      @include clearfix();


      .field {
        float: left;
        margin: 0 ($baseline/2) ($baseline/2);

        label,
        input {
          display: block;
          text-align: left;
        }

        label {
          @extend %t-copy-sub1;
          margin-bottom: ($baseline/4);
          font-weight: 600;
        }

        input[type="text"] {
          @extend %t-copy-sub1;
        }
      }
    }
  }



  // UI: DnD - specific elems/cases - section
  .courseware-section {

    .draggable-drop-indicator-before {
      top: -($baseline/2);
      left: 0;
    }

    .draggable-drop-indicator-after {
      bottom: -13px;
      left: 0;
    }

    // CASE: DnD - empty subsection with unit dropping
    .drop-target-prepend .draggable-drop-indicator-initial {
      opacity: 1.0;
    }

    // STATE: was dropped
    &.was-dropped {
      background-color: $ui-update-color;
    }
  }

  // UI: DnD - specific elems/cases - subsection
  .courseware-subsection {

    .draggable-drop-indicator-before {
      top: 0;
    }

    .draggable-drop-indicator-after {
      bottom: 0;
    }

    // CASE: DnD - empty subsection with unit dropping
    .drop-target-prepend .draggable-drop-indicator-initial {
      opacity: 1.0;
    }

    // STATE: was dropped
    &.was-dropped {

      > .section-item {
        background-color: $ui-update-color !important; // nasty, but needed for specificity
      }
    }
  }

  // UI: DnD - specific elems/cases - unit
  .courseware-unit {

    .draggable-drop-indicator-before {
      top: 0;
    }

    .draggable-drop-indicator-after {
      bottom: 0;
    }

    // STATE: was dropped
    &.was-dropped {

      > .section-item {
        background-color: $ui-update-color !important; // nasty, but needed for specificity
      }
    }
  }

  // UI: DnD - specific elems/cases - empty parents splint
  .ui-splint-indicator {
    position: relative;
  }
}
