// studio - elements - xblock rendering
// ==========================

// styling for xblocks at various levels of nesting: page level,

// extends - UI archetypes - xblock rendering
.wrapper-xblock {
  margin: ($baseline/2);
  border: 1px solid $gray-l4;
  border-radius: ($baseline/5);
  background: $white;
  box-shadow: 0px 1px 1px $shadow-l1;


  &:hover {
    box-shadow: 0 0 1px $shadow;
  }

  // UI: xblock header primary for main title and xblock actions
  .xblock-header-primary {
    @include box-sizing(border-box);
    border-bottom: 1px solid $gray-l4;
    border-radius: ($baseline/5) ($baseline/5) 0 0;
    min-height: ($baseline*2.5);
    background-color: $gray-l6;
    padding: ($baseline/2) ($baseline/2) ($baseline/2) ($baseline);

    .header-details {
      @extend %cont-truncated;
      display: inline-block;
      width: 50%;
      vertical-align: middle;

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

    .header-actions {
      display: inline-block;
      width: 49%;
      vertical-align: middle;
      text-align: right;
    }
  }

  // secondary header for meta-information and associated actions
  .xblock-header-secondary {
    overflow: hidden;
    border-top: 1px solid $gray-l3;
    background-color: $gray-l5;
    padding: ($baseline/2) $baseline;

    .meta-info {
      display: inline-block;
      vertical-align: middle;
      width: 65%;
      font-style: italic;
      color: $gray;
    }

    .actions-list {
      width: 34%;
      display: inline-block;
      vertical-align: middle;
      text-align: right;

      .action-item {
        display: inline-block;

        .action-button {
          @include transition(all $tmg-f3 linear 0s);
          display: block;
          width: auto;
          height: ($baseline*1.5);
          border-radius: 3px;
          padding: 3px ($baseline/2) 0 ($baseline/2);
          color: $gray-l1;

          &:hover {
            background-color: $blue;
            color: $gray-l6;
          }

          .action-button-text {
            display: inline-block;
            vertical-align: middle;
            padding: 0 1px;
            text-transform: uppercase;
          }

          &.delete-button:hover {
            background-color: $gray-l1;
          }
        }

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

  // ====================

  //UI: default internal xblock content styles

  // internal headings for problems and video components
  h2 {
    @extend %t-title5;
    margin: ($baseline*1.5) ($baseline*2) ($baseline*1.5) 0;
    color: $gray;
    letter-spacing: 1px;
    text-transform: uppercase;
  }


  // ====================

  // UI: xblocks - calls-to-action
  .wrapper-xblock .header-actions {

    .actions-list {
      @extend %actions-list;
    }
  }

  // UI: xblock is collapsible
  .wrapper-xblock.is-collapsible,
  .wrapper-xblock.xblock-type-container {

    [class^="icon-"] {
      font-style: normal;
    }

    .expand-collapse {
      @extend %expand-collapse;
      margin: 0 ($baseline/4);
      height: ($baseline*1.25);
      width: $baseline;

      &:focus {
        outline: 0;
      }
    }

    .action-view {

      .action-button {
        transition: none;
      }

      .action-button-text {
        padding-right: ($baseline/5);
        padding-left: 0;
      }
    }
  }

  // xblock message area, for general information as well as validation
  .wrapper-xblock-message {

    .xblock-message {
      @extend %t-copy-sub1;
      background-color: $gray-d2;
      padding: ($baseline/2) ($baseline*.75);
      color: $white;

      [class^="icon-"] {
        font-style: normal;
      }

      &.information {
        @extend %t-copy-sub1;
        background-color: $gray-l5;
        color: $gray-d2;
      }

      &.validation {
        background-color: $gray-d2;
        color: $white;

        a {
          color: $blue-l2;
        }

        &.has-warnings {
          border-bottom: 3px solid $orange;

          .icon-warning-sign {
            margin-right: ($baseline/2);
            color: $orange;
          }
        }

        &.has-errors {
          border-bottom: 3px solid $red-l2;

          .icon-exclamation-sign {
            margin-right: ($baseline/2);
            color: $red-l2;
          }
        }
      }
    }

    .xblock-message-list {
      margin-bottom: 0;
    }

    .xblock-message-actions {
      padding: ($baseline/2) $baseline;
      background-color: $gray-d1;

      .actions-list {
        @extend %actions-list;
      }
    }
  }

  // CASE: page level - outer most level
  &.level-page {
    margin: 0;
    box-shadow: none;
    border: 0;

    .xblock-header {
      display: none;
    }

    .xblock-message {
      border-radius: 3px 3px 0 0;

      &.validation {
        padding-top: ($baseline*.75);
      }

      .xblock-message-list {
        margin: ($baseline/5) ($baseline*2.5);
        list-style-type: disc;
        color: $gray-l3;
      }

      .xblock-message-item {
        padding-bottom: ($baseline/4);
      }

      &.information {
        padding: 0 0 ($baseline/2) 0;
        background-color: $gray-l5;
        color: $gray-d1;
      }
    }

    .no-container-content {

      .xblock-message-list {
        margin: 0;
        list-style-type: none;
        color: $gray-d2;
      }
    }

  }

  // CASE: nesting level - element wrapper level
  &.level-nesting {
    @include transition(all $tmg-f2 linear 0s);
    border: 1px solid $gray-l3;
    padding-bottom: $baseline;

    // min-height to allow drop when empty
    .reorderable-container {
      min-height: $baseline;
    }

    .xblock-header {
      display: block;
    }

    .xblock-header-primary {
      @include ui-flexbox();
      margin-bottom: 0;
      border-bottom: none;
      background: none;
    }

    .xblock-render {
      margin: ($baseline/2);
    }

    // STATE: nesting level xblock is collapsed
    &.collapsed {
      padding-bottom: 0;
      background-color: $gray-l7;
      box-shadow: 0 0 1px $shadow-d2 inset;
    }
  }

  // CASE: element/component level
  &.level-element {
    @include transition(all $tmg-f2 linear 0s);
    box-shadow: none;

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

    .xblock-header {
      display: block;
    }

    .xblock-header-primary {
      display: flex;
      margin-bottom: 0;
      border-bottom: 1px solid $gray-l4;
      background-color: $gray-l6;
      font-weight: 300;
    }

    .xblock-render {
      margin: ($baseline/2);
      padding: ($baseline/2);
    }

    // STATE: container/component with children - abbreviated preview
    &.xblock-type-container {

      .xblock-header-primary {
        margin-bottom: 0;
        border-bottom: 0;
        border-radius: ($baseline/5);
      }

      .xblock-render {
        display: none;
      }
    }

    .wrapper-xblock-message {

      .xblock-message {
        border-radius: 0 0 3px 3px;

        .xblock-message-list {
          margin: 0;
          list-style-type: none;
        }

        &.information {
          @extend %t-copy-sub2;
          padding: 0 0 ($baseline/2) $baseline;
          color: $gray-l1;
        }

        &.validation.has-warnings {
          border: 0;
          border-top: 3px solid $orange;
        }

        &.validation.has-errors {
          border: 0;
          border-top: 3px solid $red-l2;
        }
      }
    }
  }

  // CASE: edited experiment groups: active and inactive
  .wrapper-groups {

    .title {
      @extend %t-title7;
      margin-left: ($baseline/2);
      color: $gray-l1;
    }

    &.is-active {

      // don't show delete buttons on active groups
      .wrapper-xblock.level-nesting > .xblock-header .action-delete {
        display: none;
      }
    }

    &.is-inactive {
      margin: ($baseline*1.5) 0 0 0;
      border-top: 2px dotted $gray-l2;
      padding: ($baseline*.75) 0;
      background-color: $gray-l4;

      .wrapper-xblock.level-nesting {
        @include transition(all $tmg-f2 linear 0s);
        opacity: .7;

        &:hover {
          opacity: 1;
        }
      }

      // don't show add new content to inactive groups
      .new-component-item {
        display: none;
      }
    }
  }
}

// ====================
// XBlock editing

// xblock Editor tab wrapper
.wrapper-comp-editor {
  display: block;

  // Because the editor may be a CodeMirror editor (which must be visible at the time it is created
  // in order for it to properly initialize), we must toggle "is-inactive" instead of the more common "is-active"
  &.is-inactive {
    display: none;
  }
}

// xblock Settings tab wrapper
.wrapper-comp-settings {
  display: none;

  &.is-active {
    display: block;
  }

  .file-uploader {
    .upload-setting {
      @extend %ui-btn-flat-outline;
      @extend %t-action3;
      @include box-sizing(border-box);
      display: inline-block;
      padding: ($baseline/2);
      font-weight: 600;
      width: 49%;
      margin-right: 2%;
    }

    .download-setting {
      @extend %ui-btn-non;
      @extend %t-action4;
      @include box-sizing(border-box);
      display: inline-block;
      padding: ($baseline/2);
      font-weight: 600;
      width: 49%;
      text-align: center;
      color: $blue;

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

    .wrapper-uploader-actions {
      width: 45%;
      display: inline-block;
      min-width: ($baseline*5);
    }
  }

  //settings-list
  .list-input.settings-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto;
    max-height: 400px;

    //chrome scrollbar visibility correction
    &::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 11px;
      height: 11px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid $gray-l2;
      background-color: rgba(0, 0, 0, .5);
    }

    //component-setting-entry
    .field.comp-setting-entry {
      opacity: 0.7;
      margin: 0 $baseline;
      border-top: 1px solid $gray-l4;
      background-color: $white;
      padding: $baseline ($baseline/2);

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

    &:hover {
      opacity: 1.0;
    }

    &.is-set {
      opacity: 1.0;
      background-color: $white;

      .setting-input {
        color: $blue-l1;
      }
    }

    .wrapper-comp-setting {
      min-width: 300px;
      top: 0;
      vertical-align: top;
      margin-bottom:5px;
      position: relative;
    }

    .setting-label {
      @extend %t-copy-sub1;
      @include transition(color $tmg-f2 ease-in-out 0s);
      vertical-align: middle;
      display: inline-block;
      position: relative;
      left: 0;
      width: 25%;
      min-width: 100px;
      margin-right: ($baseline/2);
      font-weight: 600;

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

    input, select, input[type="number"] {
      @include placeholder($gray-l4);
      @include font-size(16);
      @include size(100%,100%);
      width: 45%;
      min-width: 100px;
      padding: ($baseline/2);
      border-radius: 3px;
      border: 1px solid $gray-l2;
      text-overflow: ellipsis;
    }

    //Allows users to copy full value of disabled inputs.
    input.is-disabled {
      text-overflow: clip;
      opacity: .5;
    }

    input[type="number"] {
      width: 42%;
      box-shadow: 0 1px 2px $shadow-l1 inset;
      //For webkit browsers which render number fields differently, make input wider.
      -moz-column-width: {
        width: 32%;
      }

      &:active {
        background-color: #FFFCF1;
      }
    }

    select {

      &:focus {
        box-shadow: 0 0 1px $shadow;
        @include transition(opacity $tmg-f2 ease-in-out 0s);
        background-color: $yellow;
      }

      &:active {
        background-color: $yellow;
      }
    }

    .action.setting-clear {
      @include font-size(11);
      color: $gray;
      width: 25px;
      height: 25px;
      vertical-align: middle;
      padding: 5px;
      border-radius: 50%;
      margin: 0 $baseline/2;
      box-shadow: none;
      text-shadow: none;
      border: 1px solid $gray-l1;
      background-color: $gray-l4;

      &:hover {
        box-shadow: 0 1px 1px $shadow;
        @include transition(opacity $tmg-f2 ease-in-out 0s);
        background-color: $blue-s3;
        border: 1px solid $blue-s3;
        color: $white;
      }

      &.inactive {
        visibility: hidden;
      }
    }

    .setting-help {
      @include font-size(12);
      display: inline-block;
      font-color: $gray-l6;
      min-width: ($baseline*10);
      vertical-align: top;
    }



    // TYPE: enumerated lists of metadata sets
    .metadata-list-enum {

      * {
        @include box-sizing(border-box);
      }

      // label
      .setting-label {
        vertical-align: top;
        margin-top: ($baseline/2);
      }

      // inputs and labels
      .wrapper-list-settings {
        @include size(45%,100%);
        display: inline-block;
        min-width: ($baseline*5);

        // enumerated fields
        .list-settings {
          margin: 0;

          .list-settings-item {
            margin-bottom: ($baseline/2);
          }

          // inputs
          .input {
            width: 80%;
            margin-right: ($baseline/2);
            vertical-align: middle;
          }
        }
      }

      .setting-clear {
        vertical-align: top;
        margin-top: ($baseline/4);
      }

      .create-setting {
        @extend %ui-btn-flat-outline;
        @extend %t-action3;
        display: block;
        width: 100%;
        padding: ($baseline/2);
        font-weight: 600;

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

      .remove-setting {
        @include transition(color 0.25s ease-in-out);
        @include font-size(20);
        display: inline-block;
        background: transparent;
        color: $blue-l3;

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

    // TYPE: Dict
    .metadata-dict {
      * {
        @include box-sizing(border-box);
      }

      // label
      .setting-label {
          vertical-align: top;
          margin-top: ($baseline*.75);
      }

      // inputs and labels
      .wrapper-dict-settings {
        width: 55%;
        display: inline-block;
        min-width: 240px;

        // enumerated fields
        .list-settings {
          margin: ($baseline/2) 0 0;

          .list-settings-item {
            margin-bottom: ($baseline/2);
          }

          // inputs
          .input {
            width: 43%;
            margin-right: ($baseline/4);
            vertical-align: middle;
            display: inline-block;

            &.input-value {
              margin-right: ($baseline/2);
            }
          }
        }
      }

      .setting-clear {
        vertical-align: top;
        margin: ($baseline*.75) 0 0 0;
      }

      .create-setting {
        @extend %ui-btn-flat-outline;
        @extend %t-action3;
        display: block;
        width: 88%;
        padding: ($baseline/2);
        font-weight: 600;

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

      .remove-setting {
        @include transition(color 0.25s ease-in-out);
        @include font-size(20);
        display: inline-block;
        background: transparent;
        color: $blue-l3;

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

// CASE: special xblock type overrides

// Latex Compiler
// make room for the launch compiler button
.wrapper-comp-editor.latex-problem {
  margin-top: ($baseline*2.5);
}

// sadly this button is outside the wrapper for the latex-problem so we can't get more specific with the class rule - ugh
.launch-latex-compiler {
  position: absolute;
  width: 100%;
  top: 0;
  background-color: $white;
  padding: $baseline/2 0 $baseline/2 $baseline;
  border-bottom: 1px solid $gray-l2;
}

//  hides latex compiler button if settings mode is-active - double ugh
div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
  display: none;
}


.wrapper-xblock {

    .discussion-preview {
      color: $gray-l1;
      font-style: italic;
    }
}
