// ============================================================================
// :: Container
// ============================================================================
/**
 * The container is used to create a maximum width an any element and center it
 * based on its maximum width or the screen width. It is a simple layout, of
 * which its modifiers manipulate mainly to position on the screen (left, right,
 * center) or its maximum width.
 */

// ============================================================================
// :: Root
// ============================================================================
.l-container {
  width: 100%;
  height: 100%;
  max-width: calc(#{$container-width-default} - #{$container-spacing-mobile-default * 2});
  margin: 0 auto;

  // @include respond-at($breakpoint-tablet-default) {
  //   max-width: calc(#{$container-width-default} - #{$container-spacing-tablet-default * 2});
  // }

  // @include respond-at($breakpoint-desktop-default) {
  //   max-width: calc(#{$container-width-default} - #{$container-spacing-desktop-default * 2});
  // }

  // @include respond-at($breakpoint-desktop-large) {
  //   max-width: calc(#{$container-width-default} - #{$container-spacing-desktop-large * 2});
  // }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.l-container--1x-small {

  @include respond-at($breakpoint-tablet-default) {
    max-width: $container-width-1x-small;
  }
}

.l-container--1x-medium {

  @include respond-at($breakpoint-tablet-default) {
    max-width: $container-width-1x-medium;
  }
}

.l-container--1x-large {

  @include respond-at($breakpoint-tablet-default) {
    max-width: $container-width-1x-large;
  }
}

.l-container--align-left {

  @include respond-at($breakpoint-tablet-default) {
    margin-left: 0;
  }
}

// ============================================================================
// :: States
// ============================================================================