@import '../../utilities/measurements';
@import 'mixins_breakpoints';

/* --------
BEM Naming Convention for Bootstrap Grid
-------- */

// row
.row {
  @include make-row();
  @include rem(padding-top, 10px);
  @include media-query-small {
    @include rem(padding-top, 15px);
  }
}

/* -------- row modifiers -------- */

.row--no-padding {
  padding: 0;
}

.row-no-padding {
  [class*='col-'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

// column within a row
.col {
  position: relative;
  min-height: 1px;
  padding-left: ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

/* -------- column modifiers -------- */

.col--gutter-zero {
  padding: 0;
}

.col--add-gutter-left {
  @include media-query-medium {
    padding-left: $grid-gutter-width;
  }
}

.col--add-gutter-right {
  @include media-query-medium {
    padding-right: $grid-gutter-width;
  }
}

// important to overwrite float
.col--horiz-centered {
  float: none !important;
  margin: 0 auto;
}

// creating reusable width/offset/pull/push classes for xs
@for $columns from 1 through 12 {
  // create columns
  .col--span-xs-#{$columns} {
    width: percentage(($columns / $grid-columns));
    float: left;
  }

  // create push classes
  .col--push-xs-#{$columns} {
    left: percentage(($columns / $grid-columns));
  }

  // create pull classes
  .col--pull-xs-#{$columns} {
    right: percentage(($columns / $grid-columns));
  }

}

.col--span-xs-12 {
  width: 100%;
}

// creating reusable width/offset/pull/push classes for sm/md/lg
@each $breakpoint in $breakpoints {
  $i: index($breakpoints, $breakpoint);

  @media (min-width: nth($breakpoint-size, $i)) {
    @for $columns from 1 through 12 {
      // create columns
      .col--span-#{$breakpoint}-#{$columns} {
        width: percentage(($columns / $grid-columns));
        float: left;
      }

      // create push classes
      .col--push-#{$breakpoint}-#{$columns} {
        left: percentage(($columns / $grid-columns));
      }

      // create pull classes
      .col--pull-#{$breakpoint}-#{$columns} {
        right: percentage(($columns / $grid-columns));
      }

    }
  }

  // bespoke column classes for configurations not covered by the grid system eg. 5 column grid

  .col--span-lg-fifth {
    width: 20%;
    float: left;
  }

}

// creating reusable width/offset/pull/push classes for xs
@for $columns from 1 through 12 {
  // create offset classes
  .col--offset-xs-#{$columns} {
    margin-left: percentage(($columns / $grid-columns));
  }

}

// creating reusable width/offset/pull/push classes for sm/md/lg
@each $breakpoint in $breakpoints {
  $i: index($breakpoints, $breakpoint);

  @media (min-width: nth($breakpoint-size, $i)) {
    @for $columns from 1 through 12 {
      // create columns
      // create offset classes
      .col--offset-#{$breakpoint}-#{$columns} {
        margin-left: percentage(($columns / $grid-columns));
      }

    }
  }
}