// Grid Container
@mixin grid-container {
  @include bulletproof-clearfix;
  @include grid-container-base;
}

@mixin grid-container-base {
  margin-right: auto;
  margin-left: auto;
  width: grid-width($grid-columns);
}

// Nested Container
@mixin nested-grid-container {
  @include bulletproof-clearfix;
  @include nested-grid-container-base;
}

@mixin nested-grid-container-base {
  display: inline-block;
  margin-left: -(grid-margin());
  margin-right: -(grid-margin());
  width: auto;
}

// Grid
@mixin grid($grid-columns) {
  @include grid-base($grid-columns);
  @include grid-block;
}

@mixin grid-full {
  @include grid($grid-columns);
}

@mixin grid-base($grid-columns) {
  @include grid-width($grid-columns);
}

// Grid Block
@mixin grid-block {
  @include bulletproof-clearfix;
  @include grid-block-base;
}

@mixin grid-block-base {
  @include box-sizing(border-box);
  @include float-left;
  position: relative;
  margin-right: grid-margin();
  margin-left: grid-margin();
}

// Grid logic
@mixin grid-width($grid-columns) {
  @if $grid-columns == 1 { width: $grid-width; }
  @else { width: grid-width($grid-columns) - $grid-gutter-width; }
}
@mixin grid-prefix($grid-columns) {
    margin-left: grid-width($grid-columns) + $grid-gutter-width / 2;
}
@mixin grid-suffix($grid-columns) {
  margin-right: grid-width($grid-columns) + $grid-gutter-width / 2;
}
@mixin grid-push($grid-columns) {
  left: grid-width($grid-columns);
}
@mixin grid-pull($grid-columns) {
  left: -(grid-width($grid-columns));
}