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

body.course.outline {

  input.courseware-unit-search-input {
      float: left;
      width: 260px;
      background-color: #fff;
  }

  .branch {

      .section-item {
        @include clearfix();

        .details {
          display: block;
          float: left;
          margin-bottom: 0;
          width: 650px;
        }

        .gradable-status {
          float: right;
          position: relative;
          top: -4px;
          right: 50px;
          width: 100px;

          .status-label {
            @include font-size(12);
            position: absolute;
            top: 2px;
            right: -5px;
            display: none;
            width: 110px;
            padding: 5px 40px 5px 10px;
            border-radius: 3px;
            color: $lightGrey;
            text-align: right;
            font-weight: bold;
            line-height: 16px;
          }

          .menu-toggle {
                z-index: 10;
                position: absolute;
                top: 0;
                right: 5px;
                padding: 5px;
                color: $mediumGrey;

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

              [class^="icon-"] {
                  vertical-align: middle;
                  margin-top: -5px;
                  display: inline-block;
                }

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


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

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

                    a {
                      color: $darkGrey;
                    }
                  }
                }

            a {
              color: $blue;

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

          // dropdown state
          &.is-active {

            .menu {
              z-index: 1000;
              display: block;
              opacity: 1.0;
            }

            .menu-toggle {
              z-index: 10000;
            }
          }

          // set state
          &.is-set {

            .menu-toggle {
              color: $blue;
            }

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


  .courseware-section {
      position: relative;
      background: #fff;
      border-radius: 3px;
      border: 1px solid $mediumGrey;
      margin-top: 15px;
      padding-bottom: 12px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

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

      &.collapsed {
          padding-bottom: 0;
      }

      label {
          float: left;
          line-height: 29px;
      }

      .datepair {
          float: left;
          margin-left: 10px;
      }

      .section-published-date {
          position: absolute;
          top: 19px;
          right: 80px;
          padding: 4px 10px;
          border-radius: 3px;
          background: $lightGrey;
          text-align: right;

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

              strong {
                  font-weight: bold;
              }
          }

          .schedule-button {
              @include blue-button;
          }

          .edit-button {
              @include blue-button;
          }

          .schedule-button,
          .edit-button {
              @include font-size(11);
              padding: 3px 15px 5px;
          }
      }

      .datepair .date,
      .datepair .time {
          @include font-size(13);
          box-shadow: none;
          padding-left: 0;
          padding-right: 0;
          border: none;
          background: none;
          font-weight: bold;
          color: $blue;
          cursor: pointer;
      }

      .datepair .date {
          width: 80px;
      }

      .datepair .time {
          width: 65px;
      }

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

      header {
          min-height: 75px;
          @include clearfix();

          .item-details, .section-published-date {

          }

          .item-details {
              display: inline-block;
              padding: 20px 0 10px 0;
              @include clearfix();

              .section-name {
                @include font-size(19);
                float: left;
                margin-right: 10px;
                width: 350px;
                font-weight: bold;
                color: $blue;
              }

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

                &:hover {
                  color: $orange;
                }
              }

              .section-name-edit {
                position: relative;
                width: 400px;
                background: $white;

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

            .save-button {
              @include blue-button;
              padding: 7px 20px 7px;
              margin-right: 5px;
            }

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

          .section-published-date {
            float: right;
            border-radius: 3px;
            background: $lightGrey;

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

              strong {
                font-weight: bold;
              }
            }

            .schedule-button {
              @include blue-button;
            }

            .edit-button {
              @include blue-button;
            }

            .schedule-button,
            .edit-button {
              @include font-size(11);
              padding: 0 15px 2px 15px;
              }
            }

            .gradable-status {
              position: absolute;
              top: 20px;
              right: 70px;
              width: 145px;

              .status-label {
                @include font-size(12);
                border-radius: 3px;
                position: absolute;
                top: 0;
                right: 2px;
                display: none;
                width: 100px;
                padding: 10px 35px 10px 10px;
                background: $lightGrey;
                color: $lightGrey;
                text-align: right;
                font-weight: bold;
                line-height: 16px;
              }

              .menu-toggle {
                z-index: 10;
                position: absolute;
                top: 2px;
                right: 5px;
                padding: 5px;
                color: $lightGrey;

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

              }

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



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

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

                    a {
                      color: $darkGrey;
                    }
                  }
                }

                a {

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

            // dropdown state
            &.is-active {

              .menu {
                z-index: 1000;
                display: block;
                opacity: 1.0;
              }


            .menu-toggle {
              z-index: 10000;
            }
          }

          // set state
          &.is-set {

            .menu-toggle {
              color: $blue;
            }

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

          float: left;
          padding: 21px 0 0;
        }
      }

          .item-actions {
              margin-top: 21px;
              margin-right: 12px;

              .edit-button,
              .delete-button {
                  margin-top: -3px;
              }
          }

          .expand-collapse-icon {
              @include transition(none);
              float: left;
              margin: 25px 6px 16px 16px;

              &.expand {
                  background-position: 0 0;
              }

              &.collapsed {

              }
          }

          .drag-handle {
              margin-left: 11px;
          }
      }

      h3 {
          @include font-size(19);
          font-weight: 700;
          color: $blue;
      }

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

          &:hover {
              color: $orange;
          }
      }

      .section-name-form {
          margin-bottom: 15px;
      }

      .section-name-edit {
          input {
            @include font-size(16);
          }

          .save-button {
              @include blue-button;
              padding: 7px 20px 7px;
              margin-right: 5px;
          }

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

      h4 {
          @include font-size(12);
          color: #878e9d;

          strong {
              font-weight: bold;
          }
      }

      .list-header {
          @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
          background-color: #ced2db;
          border-radius: 3px 3px 0 0;
      }

      .subsection-list {
          margin: 0 12px;

          > ol {
              @include tree-view;
              border-top-width: 0;
          }
      }

      &.new-section {

          header {
              @include clearfix();
              height: auto;
          }

          .expand-collapse-icon {
              visibility: hidden;
          }

          .item-details {
            padding: 25px 0 0 0;

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

  .toggle-button-sections {
      @include font-size(12);
      display: none;
      position: relative;
      float: right;
      margin-top: ($baseline/4);
      color: $darkGrey;

      &.is-shown {
          display: block;
      }

      [class^="icon-"] {
          @include font-size(11);
          border-radius: 20px;
          position: relative;
          top: -1px;
          display: inline-block;
          margin-right: 2px;
          line-height: 5px;
      }

      .label {
          display: inline-block;
      }
  }

  .new-section-name,
  .new-subsection-name-input {
      width: 515px;
  }

  .new-section-name-save,
  .new-subsection-name-save {
      @include blue-button;
      padding: 4px 20px 7px;
      margin: 0 5px;
      color: #fff !important;
  }

  .new-section-name-cancel,
  .new-subsection-name-cancel {
      @include white-button;
      padding: 4px 20px 7px;
      color: #8891a1 !important;
  }

  .dummy-calendar {
      display: none;
      position: absolute;
      top: 55px;
      left: 110px;
      z-index: 9999;
      border: 1px solid #3C3C3C;
      box-shadow: 0 1px 15px rgba(0, 0, 0, .2);
  }

  .preview {
      background: url(../img/preview.jpg) center top no-repeat;
  }

  .edit-subsection-publish-settings {
      display: none;
      position: fixed;
      top: 100px;
      left: 50%;
      z-index: 99999;
      width: 600px;
      margin-left: -300px;
      background: #fff;
      text-align: center;

      .settings {
          padding: 40px;
      }

      h3 {
          @include font-size(34);
          font-weight: 300;
      }

      .picker {
          @include clearfix();
          margin: 30px 0 65px;

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

            &:first-child {
              margin-left: ($baseline*5);
            }

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

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

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

      .description {
          @include font-size(14);
          float: left;
          margin-top: 30px;
          line-height: 20px;
          width: 100%;
      }

      strong {
          font-weight: 700;
      }

      .start-date,
      .start-time {
          @include font-size(19);
      }

      .save-button {
          @include blue-button;
          margin-right: 10px;
      }

      .cancel-button {
          @include white-button;
      }

      .save-button,
      .cancel-button {
        @include font-size(16);
      }
  }

  .collapse-all-button {
      @include font-size(13);
      float: right;
      margin-top: 10px;
      color: $darkGrey;
  }

  // sort/drag and drop
  .ui-droppable {
      @include transition (padding 0.5s ease-in-out 0s);
      min-height: 20px;
      padding: 0;

      &.dropover {
          padding: 15px 0;
      }
  }

  .ui-draggable-dragging {
      box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
      border: 1px solid $darkGrey;
      opacity : 0.2;
      &:hover {
          opacity : 1.0;
          .section-item {
              background: $yellow !important;
          }
      }

      // hiding unit button - temporary fix until this semantically corrected
      .new-unit-item {
        display: none;
      }
  }

  ol.ui-droppable .branch:first-child .section-item {
      border-top: none;
  }
}
