// # Layout
// Classes for building page layouts. Use this only to build the major
// layout areas of a page.

// - `lego-pane-group` defines a flexbox area.
// - `lego-pane-group--column` defines the direction of the flex to be a column. By default flex children are in a row.
// - `lego-pane--full` sets the height to 100%. Generally only needed on the first child of the body, essentially a wrapper.
// - `lego-pane` is the child of the flexbox. By itself doesn't have CSS associated with it but it does help identify the structure when troubleshooting.
// - `lego-pane--flex-1` is equivalent to `flex:1`.

// ## Example

// <div class="example html">
//     <div class="lego-pane-group lego-pane-group--column lego-pane--full">
//       <div class="lego-pane">
//         <div class="docs-layout-item">pane</div>
//       </div>
//       <div class="lego-pane lego-pane-group lego-pane--flex-1">
//         <div class="lego-pane lego-pane--flex-1">
//           <div class="docs-layout-item">pane</div>
//         </div>
//         <div class="lego-pane">
//           <div class="docs-layout-item">pane</div>
//         </div>
//       </div>
//     </div>
// </div>

// ### Panes

%lego-pane-group,
.lego-pane-group {
  @include display(flex);
  // This deals with the way FF handles display:flex defaults and overflow.
  // http://stackoverflow.com/questions/29398259/css-flexbox-issue-in-firefox-v36-and-greater
  min-height: 0;

  &--column {
    @include flex-direction(column);
  }
}

%lego-pane,
.lego-pane {

  &--full {
    height: 100%;
  }

  &--flex {
    @include display(flex);
  }

  &--flex-1 {
    @include flex(1);
  }

  &--flex-none {
    @include flex(none);
  }

  &--scroll-x {
    overflow-x: auto;
  }

  &--scroll-y {
    overflow-y: auto;
  }

  &--empty {
    @include display(flex);
    @include justify-content(center);
    @include align-items(center);
  }
}


// ### Lego Fence
// This adds padding or margin to full-width items
// to move them away from the walls for their container.

%lego-fence--soft,
.lego-fence--soft {
  padding-left: spacer(2);
  padding-right: spacer(2);
}

%lego-fence--push,
.lego-fence--push {
  margin-left: spacer(2);
  margin-right: spacer(2);
}

.empty-state-message {
  color: map-fetch($color, text muted);
  font-size: map-fetch($font, size epsilon);
  text-align: center;
}

// ## Full Screen
// Make an element fill the window.

.full-screen {
  position: absolute;
  width: 100%;
  height: 100%;
}