// *************************************
//
//   Page
//   -> Page Specific
//      * http://jsfiddle.net/necolas/rZvEF/
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .page[.page--flag]
//   .page-media
//     / ...
//   .page-content
//     / ...
//
// *************************************

.page {
  margin: 0 auto;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: map-get($z-index, page);
  transition: map-get($transitions, menu);
  background-color: #fff;
  padding-top: 51px;
  will-change: left;

  @if $debug == true {
    background: linear-gradient(
      to bottom,
      rgba(200, 200, 200, 1) 0,
      rgba(200, 200, 200, 1) 1px,
      rgba(255, 255, 255, 1) 1px,
      rgba(255, 255, 255, 1) 2px
    );
    background-size: 100% 1rem;
  }

  .open-menu & {
    left: map-get($component-widths, sidebar);
    // transform: translateX(map-get($component-widths, sidebar));
  }
}