/* ==============================================
   Structure
============================================== */

/**
 * Common page layout structure elements designed for rapid responsive development.
 */
.container {
  max-width: $page-max-width;
  padding: 0 $page-edge;
  margin: 0 auto;
}



/**
 * Fixed sidebar with a flexible content area. This pattern is useful for content folding
 * where the sidebar needs to wrap under the content area, and retain natural sizing.
 *
   <div class="has-sidebar">
     <div class="has-sidebar__content">
       ...
     </div>
     <div class="has-sidebar__sidebar">
       ...
     </div>
   </div>
 *
 */
.has-sidebar,
.has-sidebar--left {
  @extend .cf;
}

@include breakpoint("desktop-up", true) {
  .has-sidebar {
    padding-right: $sidebar-right-width + $sidebar-right-gutter;
  }

  .has-sidebar__sidebar {
    width: $sidebar-right-width;
    margin-right: -100%;
    margin-left: $sidebar-right-gutter;
    float: left;
  }
  .has-sidebar__content {
    width: 100%;
    float: left;
  }

  .has-sidebar--left {
    padding-left: $sidebar-left-width + $sidebar-left-gutter;

    .has-sidebar__sidebar {
      width: $sidebar-left-width;
      margin-right: $sidebar-left-gutter;
      margin-left: -100%;
      float: right;
    }

    .has-sidebar__content {
      float: right;
    }
  }
}