// ------------------------------------
// Mixins
// ------------------------------------

// Generate the different container sizes at various break points
// Usage:
//    @import generate-container ( <Nested List Of (breakpoint-size, container-size)> )
// Example:
//    @import generate-container ( (1200px, 1170px), (768px, 750px) )
@mixin generate-container ($breakpoints) {
  @each $bp-size, $container-size in $breakpoints {
    @media (min-width: $bp-size) {
      max-width: $container-size + ($column-gutter * 2);
    }
  }
}

// Cell Size Mixin
@mixin col-fractions-class-names($numerator, $denominator, $breakpoint: null, $breakpoint-name: null) {
  $fraction: #{$numerator}\/#{$denominator};
  $width: percentage($numerator / $denominator);

  @if ($numerator == $denominator) {
    $fraction: 1;
  }

  @if ($breakpoint and $breakpoint-name) {
    .col--#{$fraction}-#{$breakpoint-name} {
      @media (min-width: $breakpoint) {
        width: $width;
      }
    }
  } @else {
    .col--#{$fraction} {
      width: $width;
    }
  }
}

// Cell Size Mixin
@mixin generate-cols-fractions ($breakpoint: null, $breakpoint-name: null) {
  @each $denominator in $column-fraction-denominators {
    @if $denominator == 1 {
      @include col-fractions-class-names(1, 1, $breakpoint, $breakpoint-name);
    } @else {
      @for $i from 1 through ($denominator - 1) {
        @include col-fractions-class-names($i, $denominator, $breakpoint, $breakpoint-name);
      }
    }
  }
}

// Grid Alignment Mixin
@mixin row-alignment ($position, $breakpoints) {
  .row--align-#{$position} {
    @content;
  }

  @each $bp-size, $name in $breakpoints {
    .row--align-#{$position}-#{$name} {
      @media (min-width: $bp-size) {
        @content;
      }
    }
  }
}

// Cell Alignment Mixin
@mixin col-alignment ($position, $breakpoints) {
  .col--align-#{$position} {
    @content;
  }

  @each $bp-size, $name in $breakpoints {
    .col--align-#{$position}-#{$name} {
      @media (min-width: $bp-size) {
        @content;
      }
    }
  }
}


// ------------------------------------
// CSS
// ------------------------------------
.container {
  @include generate-container (
    (
      ($screen-small, $container-width-small),
      ($screen-medium, $container-width-medium),
      ($screen-large, $container-width-large),
    )
  );

  display: block;
  margin: 0 auto;
  padding: 0 $column-gutter;
  width: 100%;
}

.container-fluid {
  display: block;
  margin: 0 auto;
  padding: 0 $column-gutter;
  width: 100%;
}

.container--space-y {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: (-$column-gutter);

  & + & {
    margin-top: $column-gutter;
  }

  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.row-spacer {
  & + & {
    margin-top: $column-gutter;
  }
}

.row + .row-spacer {
  margin-top: $column-gutter;
}

.row-spacer + .row {
  margin-top: $column-gutter;
}

.row-spacer--centre {
  margin-left: auto;
  margin-right: auto;
}

.col {
  padding: 0 $column-gutter;
  margin: $column-gutter 0;
  width: 100%;
  float: left;
}

.col--auto {
  @media (min-width: $screen-small) {
    flex: 1 1 auto;
    width: auto;
  }
}

// Generate the cell sizings for different breakpoints
@include generate-cols-fractions();
@include generate-cols-fractions($screen-small, 'small');
@include generate-cols-fractions($screen-medium, 'medium');
@include generate-cols-fractions($screen-large, 'large');

// Row Horizontal Alignment
@include row-alignment('left',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  justify-content: flex-start;
}

@include row-alignment('right',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  justify-content: flex-end;
}

@include row-alignment('center',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  justify-content: center;
}

@include row-alignment('justify',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  display: flex;
  justify-content: space-between;
}

// Row Vertical Alignment
@include row-alignment('top',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  align-items: flex-start;
}

@include row-alignment('bottom',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  align-items: flex-end;
}

@include row-alignment('middle',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  align-items: center;
}

// Column Vertical Alignment
@include col-alignment('top',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  align-self: flex-start;
}

@include col-alignment('bottom',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  align-self: flex-end;
}

@include col-alignment('middle',
  (
    ($screen-small, 'small'),
    ($screen-medium, 'medium'),
    ($screen-large, 'large'),
  )
) {
  align-self: center;
}