@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "./../variables" as *;
@use "./../mixins/breakpoints" as *;

// Grid system
// Generate semantic grid columns with these mixins.

@mixin make-row($gutter: $grid-gutter) {
  --gutter-x: #{$gutter};
  --gutter-y: 0;

  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-0.5 * var(--gutter-x));
  margin-left: calc(-0.5 * var(--gutter-x));
}

@mixin make-col-ready() {
  // Add box sizing if only the grid is loaded
  // box-sizing: if(
  //   meta.global-variable-exists(include-column-box-sizing) and $include-column-box-sizing,
  //   border-box,
  //   null
  // );
  box-sizing: if(
    sass(meta.global-variable-exists(include-column-box-sizing) and $include-column-box-sizing): border-box; else: null
  );

  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we set the width
  // later on to override this initial width.
  flex-shrink: 0;
  width: 100%;
  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
  padding-right: calc(var(--gutter-x) * 0.5);
  padding-left: calc(var(--gutter-x) * 0.5);
  margin-top: var(--gutter-y);
}

@mixin make-col($size: false, $columns: $grid-columns) {
  @if $size {
    flex: 0 0 auto;
    width: math.percentage(math.div($size, $columns));
  } @else {
    flex: 1 1 0;
    max-width: 100%;
  }
}

@mixin make-col-auto() {
  flex: 0 0 auto;
  width: auto;
}

@mixin make-col-fit() {
  flex: 1 0 0%;
}

@mixin make-col-offset($size, $columns: $grid-columns) {
  $num: math.div($size, $columns);

  // margin-left: if($num == 0, 0, math.percentage($num));
  margin-left: if(sass($num == 0): 0; else: math.percentage($num));
}

// Row columns
// Specify on a parent element(e.g., .grid) to force immediate children into NN
// number of columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.

@mixin row-cols($count) {
  > * {
    flex: 0 0 auto;
    width: math.div(100%, $count);
  }
}

// Framework grid generation
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.

@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $breakpoints) {
  @each $breakpoint in map.keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      .col-#{$infix},
      .col {
        @include make-col-fit;
      }

      .col-#{$infix}-auto {
        @include make-col-auto;
      }

      .col-#{$infix}-fit {
        @include make-col-fit;
      }

      @if $columns > 0 {
        @for $i from 1 through $columns {
          .col-#{$infix}-#{$i} {
            @include make-col($i, $columns);
          }
        }

        @for $i from 0 through ($columns - 1) {
          @if not($infix == "" and $i == 0) {
            .offset-#{$infix}-#{$i} {
              @include make-col-offset($i, $columns);
            }
          }
        }
      }

      // Gutters
      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.

      @each $key, $value in $gutters {
        .g#{$infix}-#{$key},
        .gx#{$infix}-#{$key} {
          --gutter-x: #{$value};
        }

        .g#{$infix}-#{$key},
        .gy#{$infix}-#{$key} {
          --gutter-y: #{$value};
        }
      }
    }
  }
}

@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $breakpoints) {
  @each $breakpoint in map.keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    @include media-breakpoint-up($breakpoint, $breakpoints) {
      @if $columns > 0 {
        @for $i from 1 through $columns {
          .g-col-#{$infix}-#{$i} {
            grid-column: auto / span $i;
          }
        }

        // Start with `1` because `0` is an invalid value.
        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.

        @for $i from 1 through ($columns - 1) {
          .g-start-#{$infix}-#{$i} {
            grid-column-start: $i;
          }
        }
      }
    }
  }
}