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

// extends - UI archetypes - xblock rendering
%wrap-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
  .xblock-header {
    @include box-sizing(border-box);
    @include ui-flexbox();
    @extend %ui-align-center-flex;
    justify-content: space-between;
    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;
      @extend %ui-justify-left-flex;
      @include ui-flexbox();
      width: flex-grid(6,12);
      vertical-align: middle;
    }

    .header-actions {
      @include ui-flexbox();
      @extend %ui-justify-right-flex;
      width: flex-grid(6,12);
      vertical-align: middle;
    }
  }
}

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

// UI: xblocks - calls-to-action
.wrapper-xblock .header-actions {
  @extend %actions-header;

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

// 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;
    }
  }
}
