// Dependencies.
// Allow layout-center's margin/padding to override layout-3col.
@import 'layouts/layout-3col/layout-3col';

// Layout Center
//
// All other layouts should be nested inside this centered layout to ensure that
// content does not get too wide on very large screens.
//
// Applying a `.layout-*` class to the same HTML element as `.layout-center`
// would cause that element's grid to mis-align with the rest of the grid on the
// page, but this component will automatically detect the other `.layout-*`
// class and automatically use the `.layout-center--has-unnested-child` variant
// instead.
//
// .layout-center--has-unnested-child - If `.layout-center` is applied to the
//                                      same div as another .layout-* class,
//                                      then this variant should be used to fix
//                                      the grid alignment. Note: Each time a
//                                      new .layout-* component is created, this
//                                      component will need to be modified.
//
// Markup: layout-center.hbs
//
// Style guide: layouts.layout-center

.layout-center,
%layout-center {
  @include zen-apply-gutter-padding($zen-gutters--small);
  // The max content width is 1140px (the container width minus the gutters.)
  max-width: 1140px + $zen-gutters--medium;
  margin: 0 auto;

  @include respond-to(medium) {
    @include zen-apply-gutter-padding($zen-gutters--medium);
  }

  // Since .layout-center has overridden the negative margin on another
  // .layout-* container, we don't need the gutter on
  &--has-unnested-child {
    padding-left: 0;
    padding-right: 0;
  }
}

//
// Fugly selectors.
//

.layout-center {
  // Ensure the .layout-center--no-padding variant is automatically used by
  // adding all other .layout-* classes here.
  &.layout-3col {
    @extend %layout-center--has-unnested-child;
  }
}
