// Containers
// ==========================================================================
.wrapper {
  // overflow:hidden;
}
.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 100%;
  padding: 0px $outer-padding;
}
.wide-container {
  max-width: none;
  padding: 0px $outer-padding;
}
@media #{$medium-and-up} {
  .container {
  padding: 0px $outer-padding;
  }
}
@media #{$large-and-up} {
  .container {
    max-width: none;
    width: calc(87.5% + #{$outer-padding*2});
  }
}

@media screen and (max-width: $small-screen-up) {
  .nospace-mobile {
    margin-left: -$outer-padding;
    margin-right: -$outer-padding;
  }
}

// Gutenberg styles to break out of container:
// ==========================================================================
.wp-block-cover.alignwide, 
.wp-block-image.alignwide,
.wp-block-video.alignwide,
.wp-block-file.alignwide,
.wp-block-auto.alignwide,
.wp-block-pullquote.alignwide
 {
  width: auto;
}

.wp-block-image.alignwide, .wp-block-image.alignfull  {
  margin: 0 auto;
  max-width: none;
}
// Gutenberg styles
.alignfull, 
.wp-block-image.alignfull, 
.wp-block-cover.alignfull,
.wp-block-video.alignfull,
.wp-block-file.alignfull,
.wp-block-auto.alignfull,
.wp-block-pullquote.alignfull


{
  width: 100vw;
  max-width: 100vw;
  margin-right: calc(-50vw + 50% );
  margin-left: calc(-50vw + 50% );
  margin-right: 0px;
}

// Padding inside wide columns
.alignfull, .alignwide {
  .wp-block-column {
    padding: 0px $gutter-width*.75;
    .wp-block-cover {
      width:auto;
      margin-left: $gutter-width*-.75;
      margin-right: $gutter-width*-.75;
    }
  }
}

// Alignwide - break out of a m10 l8 situation
// ==========================================================================

@media #{$medium-and-up} {
  .alignwide, 
  .wp-block-cover.alignwide, 
  .wp-block-image.alignwide,
  .wp-block-video.alignwide,
  .wp-block-file.alignwide,
  .wp-block-auto.alignwide,
  .wp-block-pullquote.alignwide

  {
    margin-left: -10%;
    margin-right: -10%;
  }
}
@media screen and (min-width: $medium-screen-up) {
  .alignwide, 
  .wp-block-cover.alignwide, 
  .wp-block-image.alignwide,
  .wp-block-video.alignwide,
  .wp-block-file.alignwide,
  .wp-block-auto.alignwide,
  .wp-block-pullquote.alignwide
  {
    margin-left: -25%;
    margin-right: -25%;
  }
}

// Columns and grids - based on materialize.css
// ==========================================================================
@media screen and (max-width: $small-screen) {
  .container .row {
    margin-left: (-1 * $gutter-width / 4);
    margin-right: (-1 * $gutter-width / 4);
  }

}
.container .row {
  margin-left: (-1 * $gutter-width / 2);
  margin-right: (-1 * $gutter-width / 2);
}



// Mixins to eliminate code repitition
@mixin reset-offset {
  margin-left: auto;
  left: auto;
  right: auto;
}
@mixin grid-classes($size, $i, $perc) {
  &.offset-#{$size}#{$i} {
    margin-left: $perc;
  }
  &.pull-#{$size}#{$i} {
    right: $perc;
  }
  &.push-#{$size}#{$i} {
    left: $perc;
  }
}

.row {
  margin-left: auto;
  margin-right: auto;
  // Clear floating children
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .col {
    float: left;
    box-sizing: border-box;
    padding: 0 $gutter-width / 2;
    min-height: 1px;

    &[class*="push-"],
    &[class*="pull-"] {
      position: relative;
    }

    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      &.s#{$i} {
        width: $perc;
        @include reset-offset;
      }
      $i: $i + 1;
    }

    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      @include grid-classes("s", $i, $perc);
      $i: $i + 1;
    }

    @media #{$medium-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.m#{$i} {
          width: $perc;
          @include reset-offset;
        }
        $i: $i + 1
      }

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        @include grid-classes("m", $i, $perc);
        $i: $i + 1;
      }
    }

    @media #{$large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.l#{$i} {
          width: $perc;
          @include reset-offset;
        }
        $i: $i + 1;
      }

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        @include grid-classes("l", $i, $perc);
        $i: $i + 1;
      }
    }

    @media #{$extra-large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.xl#{$i} {
          width: $perc;
          @include reset-offset;
        }
        $i: $i + 1;
      }

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        @include grid-classes("xl", $i, $perc);
        $i: $i + 1;
      }
    }
  }
}
