// Container
//
// Standard container for centered 12-column layouts. Collapses to full-width on mobile.
// Modifier classes can be applied to the required `container__block` to use different
// preset layouts. Optionally, the `container__row` class can be used to align into rows.
//
// Apply `.-padded` modifier to add extra bottom padding to a container.
//
// .-narrow - Three-quarters width container.
// .-half   - Half-width container, can be placed side-by-side to create two-column layouts.
//
// Markup:
//   <div class="container">
//     <div class="wrapper">
//       <div class="container__block {{modifier_class}}">
//         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus
//         condimentum aliquet. Maecenas suscipit commodo dui, eu venenatis nisl volutpat.</p>
//       </div>
//       <div class="container__block {{modifier_class}}">
//         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus
//         condimentum aliquet. Maecenas suscipit commodo dui, eu venenatis nisl volutpat.</p>
//       </div>
//     </div>
//   </div>
//
// Styleguide Container

.container {
  @include clearfix;
  clear: both;

  &.-padded {
    padding-bottom: $base-spacing * 2;
  }

  > .wrapper {
    position: relative;

    @include media($tablet) {
      @include span(12 no-gutters);
      @include push(2);
    }

    .container__block {
      // When inside a container wrapper, increase top/bottom padding
      // on the container body.
      padding: $base-spacing gutters();

      &.-narrow {
        @include media($tablet) {
          @include span(9 of 12);
        }
      }

      &.-half {
        @include media($tablet) {
          @include span(6 of 12);
        }
      }
    }
  }

  // Use container rows to separate rows in columned layouts.
  .container__row {
    @include clearfix;
  }

  // Use container body for all container content, with optional modifiers
  // to span either half or three-quarters width.
  .container__block {
    @include clearfix;
    padding: gutters();
  }
}