// studio - views - course export
// ====================

.view-export {

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

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

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


  // UI: introduction
  .introduction {

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

  // UI: export controls
  .export-controls {
    @include box-sizing(border-box);
    @extend %ui-window;
    padding: $baseline ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);

    .title {
      @extend %t-title4;
    }

    .action-export {
      @extend %btn-primary-blue;
      @extend %t-action1;
      display: block;
      margin: $baseline 0;
      padding: ($baseline*0.75) $baseline;
    }

    .action {

      [class^="icon"] {
        @extend %t-icon2;
        display: inline-block;
        vertical-align: middle;
        margin-right: ($baseline/4);
      }

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


  // UI: export rules
  .export-contents {
    @include clearfix();
    margin: ($baseline*2) 0;

    .export-includes, .export-excludes {
      width: flex-grid(4,9);

      .item-detail {
        @extend %t-copy-sub1;
        @extend %wipe-last-child;
        padding-bottom: ($baseline/4);
        border-bottom: 1px solid $gray-l4;
        margin-bottom: ($baseline/4);
      }
    }

    .export-includes {
      float: left;
    }

    .export-excludes {
      float: right;
    }
  }

  // OLD
  .description {
    float: left;
    width: 62%;
    margin-right: 3%;
    font-size: 14px;

    h2 {
      font-weight: 700;
      font-size: 19px;
      margin-bottom: 20px;
    }

    strong {
      font-weight: 700;
    }

    p + p {
      margin-top: 20px;
    }

    ul {
      margin: 20px 0;
      list-style: disc inside;

      li {
        margin: 0 0 5px 0;
      }
    }
  }

  .export-form-wrapper {

    .export-form {
      float: left;
      width: 35%;
      padding: 25px 30px 35px;
      @include box-sizing(border-box);
      border: 1px solid $mediumGrey;
      border-radius: 3px;
      background: $lightGrey;
      text-align: center;

      h2 {
        margin-bottom: 30px;
        font-size: 26px;
        font-weight: 300;
      }

      .error-block {
        display: none;
        margin-bottom: 15px;
        font-size: 13px;
      }

      .error-block {
        color: $error-red;
      }

      .button-export {
        @include green-button;
        padding: 10px 50px 11px;
        font-size: 17px;
      }

      .message-status {
        margin-top: 10px;
        font-size: 12px;
      }

      .progress-bar {
        display: none;
        width: 350px;
        height: 30px;
        margin: 30px auto 10px;
        border: 1px solid $blue;

        &.loaded {
          border-color: #66b93d;

          .progress-fill {
            background: #66b93d;
          }
        }
      }

      .progress-fill {
        width: 0%;
        height: 30px;
        background: $blue;
        color: #fff;
        line-height: 48px;
      }
    }
  }
}