@use 'sass:map';
@use 'sass:math';
@use 'breakpoints';

$theme: null !default;

/// Grid system

// Generate semantic grid columns with these mixins.

@mixin ecl-make-container($gutters: map.get($theme, 'grid-gutter-width')) {
  box-sizing: border-box;
  margin-inline-start: auto;
  margin-inline-end: auto;
  position: relative;
  width: 100%;

  @each $breakpoint in map.keys($gutters) {
    @include breakpoints.up($breakpoint) {
      $gutter: map.get($gutters, $breakpoint);

      padding-inline-start: ($gutter * 0.5);
      padding-inline-end: ($gutter * 0.5);
    }
  }
}

// For each breakpoint, define the maximum width of the container in a media query
@mixin ecl-make-container-max-widths(
  $max-widths: map.get($theme, 'container'),
  $breakpoints: map.get($theme, 'breakpoint')
) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include breakpoints.up($breakpoint, $breakpoints) {
      max-width: 100%;
      width: $container-max-width;
    }
  }
}

@mixin make-gutters($gutters: map.get($theme, 'grid-gutter-width')) {
  @each $breakpoint in map.keys($gutters) {
    @include breakpoints.up($breakpoint) {
      $gutter: map.get($gutters, $breakpoint);

      padding-inline-start: ($gutter * 0.5);
      padding-inline-end: ($gutter * 0.5);
    }
  }
}

@mixin ecl-make-row($gutters: map.get($theme, 'grid-gutter-width')) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;

  @each $breakpoint in map.keys($gutters) {
    @include breakpoints.up($breakpoint) {
      $gutter: map.get($gutters, $breakpoint);

      margin-inline-start: math.div($gutter, -2);
      margin-inline-end: math.div($gutter, -2);
    }
  }
}

@mixin make-col-ready($gutters: map.get($theme, 'grid-gutter-width')) {
  box-sizing: border-box;
  min-height: 1px; // Prevent collapsing
  position: relative;

  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;

  @each $breakpoint in map.keys($gutters) {
    @include breakpoints.up($breakpoint) {
      $gutter: map.get($gutters, $breakpoint);

      padding-inline-start: ($gutter * 0.5);
      padding-inline-end: ($gutter * 0.5);
    }
  }
}

@mixin make-col($size, $columns: map.get($grid, 'columns')) {
  flex: 0 0 math.percentage(math.div($size, $columns));

  // width: percentage($size / $columns);
  // Add a `max-width` to make sure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: math.percentage(math.div($size, $columns));
}

@mixin make-col-offset($size, $columns: map.get($grid, 'columns')) {
  margin-inline-start: math.percentage(math.div($size, $columns));
}

@mixin make-col-push($size, $columns: map.get($grid, 'columns')) {
  left: if($size > 0, math.percentage(math.div($size, $columns)), auto);
}

@mixin make-col-pull($size, $columns: map.get($grid, 'columns')) {
  right: if($size > 0, math.percentage(math.div($size, $columns)), auto);
}

@mixin make-col-modifier($type, $size, $columns) {
  // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
  @if $type == push {
    @include make-col-push($size, $columns);
  } @else if $type == pull {
    @include make-col-pull($size, $columns);
  } @else if $type == offset {
    @include make-col-offset($size, $columns);
  }
}
