@import 'variables';

// Grid container
.grid-container {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
}

// Grid row
.grid-row {
  display: flex;
  flex-wrap: wrap;

  &.vertical-sm {
    margin-bottom: 8px;
  }

  &.vertical-md {
    margin-bottom: 12px;
  }

  &.vertical-lg {
    margin-bottom: 16px;
  }
}

.grid-no-gutters {
  // disabling the linting `no-important` rule, because this class needs
  // to overwrite the row and first level children columns gutters
  margin-left: 0 !important; // sass-lint:disable-line no-important
  margin-right: 0 !important; // sass-lint:disable-line no-important

  > [class ^= 'grid-col-'],
  > [class *= ' grid-col-'] {
    padding-left: 0 !important; // sass-lint:disable-line no-important
    padding-right: 0 !important; // sass-lint:disable-line no-important
  }
}

// mixin to generate the grid columns in all sizes and the
// corresponding offset and order classes for a particular breakpoint
@mixin make-grid-column($breakpoint) {
  @media (min-width: map-get($grid-breakpoints-low, $breakpoint)) and (max-width: map-get($grid-breakpoints-high, $breakpoint)) {
    .grid-row {
      margin-left: -(map-get($grid-col-gutter-width, $breakpoint));
      margin-right: -(map-get($grid-col-gutter-width, $breakpoint));
    }

    .grid-col-#{$breakpoint}-newline {
      clear: both !important; // sass-lint:disable-line no-important
    }

    .grid-col-#{$breakpoint}-hide {
      display: none;
    }

    @for $i from 1 through $grid-columns {
      .grid-col-#{$breakpoint}-#{$i} {
        flex: 0 0 percentage($i / $grid-columns);
        max-width: percentage($i / $grid-columns);
      }

      .grid-col-#{$breakpoint}-offset-#{$i} {
        margin-left: percentage($i / $grid-columns);
      }

      .grid-col-#{$breakpoint}-order-#{$i} {
        order: $i;
      }
    }

    [class ^= 'grid-col-'],
    [class *= ' grid-col-'] {
      padding: 0 map-get($grid-col-gutter-width, $breakpoint);
    }
  }
}

// mixin to generate the classes for each breakpoint/column combination
// and set gutter widths based on the breakpoint
@mixin make-grid-columns {
  %grid-column {
    min-height: 1px; // Prevent columns from collapsing when empty
    position: relative;
    width: 100%;
  }

  @each $breakpoint in map-keys($grid-breakpoints-low) {
    @for $i from 1 through $grid-columns {
      .grid-col-#{$breakpoint}-#{$i} {
        @extend %grid-column;
      }
    }

    @include make-grid-column($breakpoint);

    @media (min-width: map-get($grid-breakpoints-low, $breakpoint)) and (max-width: map-get($grid-breakpoints-high, $breakpoint)) {
      .grid-container {
        padding-left: 3.33%;
        padding-right: 3.33%;
      }
    }
  }
}

// Generate the grid columns
@include make-grid-columns;