// ============================================================================
// :: Container
// ============================================================================
/**
 * Layout item to make sure the content does not reach the sides of the screen.
 * It limits the maximum width and aligns the content.
 */

// ============================================================================
// :: Settings
// ============================================================================
// double the spacing of the container to calculate the full width of both sides
$bp-container-side-spacing: $bp-container-spacing * 2;

/**
 * to all breakpoints the side spacing must be added so that you don't see
 * a jump from the side of the page to the maximum width when the breakpoint
 * for the maximum width is reached
 */
$bp-container-breakpoint: $bp-container-large + $bp-container-side-spacing;
$bp-container-medium-breakpoint: $bp-container-medium + $bp-container-side-spacing;
$bp-container-small-breakpoint: $bp-container-small + $bp-container-side-spacing;
$bp-container-tiny-breakpoint: $bp-container-tiny + $bp-container-side-spacing;

// ============================================================================
// :: Root
// ============================================================================
.bp-container {
  /**
   * subtract the width of both sides from 100% and position it in the middle in
   * order to create white space on the side of the viewport
   */
  max-width: calc(100% - #{$bp-container-side-spacing});
  margin: 0 auto;

  @include respond-at($bp-container-breakpoint) {
    max-width: $bp-container-large;
  }

  .bp-container:not([class*="bp-container"]) {

    @include respond-to($bp-container-breakpoint) {
      max-width: 100%;
    }
  }

  .bp-container--medium {

    @include respond-to($bp-container-medium-breakpoint) {
      max-width: 100%;
    }
  }

  .bp-container--small {

    @include respond-to($bp-container-small-breakpoint) {
      max-width: 100%;
    }
  }

  .bp-container--tiny {

    @include respond-to($bp-container-tiny-breakpoint) {
      max-width: 100%;
    }
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.bp-container--medium {

  @include respond-at($bp-container-medium-breakpoint) {
    max-width: $bp-container-medium;
  }
}

.bp-container--small {

  @include respond-at($bp-container-small-breakpoint) {
    max-width: $bp-container-small;
  }
}

.bp-container--tiny {

  @include respond-at($bp-container-tiny-breakpoint) {
    max-width: $bp-container-tiny;
  }
}

.bp-container--align-left {
  margin-left: 0;
}