// Container
//
// .container-outer - should be placed on an outer div for appropriate padding
// .container-left - 7/12 width container that floats left
// .container-right - 5/12 width container that floats left
// .container-left-8 - 8/12 width container that floats left
// .container-right-4 - 4/12 width container that floats left
// .container-half - 6/12 width container that floats left
// .container-padded - full width container with padding on top and bottom
// .containter-padded-top - full width container with padding only on top
//
// Styleguide layout.container
.container {
  @include outer-container($max-width);
}

.container-outer {
  @extend .container;
  padding-left: $base-padding;
  padding-right: $base-padding;

  @include respond-to(huge-plus) {
    margin-left: $base-padding;
    margin-right: $base-padding;
  }

  @include respond-to(huge-up) {
    padding-left: 0;
    padding-right: 0;
  }
}

.container-page-wrapper {
  @extend .container;
  margin-left: $base-padding;
  margin-right: $base-padding;


  @include respond-to(small-to-huge) {
    margin-left: $page-padding;
    margin-right: $page-padding;
  }

  @include respond-to(huge-plus) {
    margin-left: $page-padding;
    margin-right: $page-padding;
    max-width: $max-width;
  }

  @include respond-to(huge-plus-up) {
    margin-left: auto;
    margin-right: auto;
  }
}

%container-side {

  @include span-columns(12);

  padding-bottom: $base-padding;

  @include respond-to(huge-up) {
    padding-left: 0;
    padding-right: 0;
  }
}

.container-left,
.container-left-7 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(7);

  }
}

.container-left-8 {
  @extend %container-side;

  @include span-columns(12);

  @include respond-to(medium-up) {

    @include span-columns(8);

  }
}

.container-left-9 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(9);

  }
}

.container-left-6 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(6);

  }
}

.container-left-4 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(4);

  }
}

.container-left-3 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(3);

  }
}

.container-left-2 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(2);

  }
}

.container-right,
.container-right-5 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(5);

  }
}

.container-right-4 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(4);

  }
}

.container-right-6 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(6);
    @include omega();
  }
}

.container-right-3 {
  @extend %container-side;

  @include span-columns(12);

  @include respond-to(medium-up) {

    @include span-columns(3);
  }
}

.container-right-7 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(8);

  }
}

.container-right-8 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(8);

  }
}

.container-right-9 {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(9);

  }
}

.container-half {
  @extend %container-side;

  @include respond-to(medium-up) {

    @include span-columns(6);
  }
}

.container-shift-1 {
  @include respond-to(medium-up) {
    @include shift(1);
  }
}

.container-shift-reverse-1 {
  @include respond-to(medium-up) {
    @include shift-reverse(1);
  }
}

.container-shift-reverse-2 {
  @include respond-to(medium-up) {
    @include shift-reverse(2);
  }
}



.container-flex {
  display: flex;

  @include respond-to(medium-up) {
    // flex-direction: column
  }
}

.container-flex-9 {
  width: 75%;
}

.container-flex-6 {
  width: 50%;
}

.container-flex-3 {
  width: 25%;
}


.container-padded {
  padding-bottom: $base-padding-extra;
  padding-top: $base-padding-extra;
}

.container-padded-top {
  padding-top: $base-padding-extra;
}

.container-margin {
  margin-bottom: $base-padding-extra;
  margin-top: $base-padding-extra;
}

.container-margin-separation {
  margin-bottom: $standard-padding-separation;
  margin-top: $standard-padding-separation;
}
