@use 'sass:math';
@use 'sass:map';
@use '../variables' as variables;
@use '../functions' as functions;
@use './breakpoints-mixins' as breakpoints-mixins;

@mixin make-row($gutter: variables.$grid-gutter-width) {
  --grid-gutter-x: #{$gutter};
  --grid-gutter-y: 0;
  display: flex;
  flex: 1; // came from previous grid. seems to be only way to make normal columns work
  flex-wrap: wrap;
  margin-left: calc(#{var(--grid-gutter-x)} / -2);
  margin-right: calc(#{var(--grid-gutter-x)} / -2);
  margin-top: calc(#{var(--grid-gutter-y)} * -1);
  max-height: 100%;
}

@mixin make-col-ready($gutter: variables.$grid-gutter-width) {
  flex-shrink: 0;
  margin-top: var(--grid-gutter-y);
  max-width: 100%;
  padding-left: calc(#{var(--grid-gutter-x)} / 2);
  padding-right: calc(#{var(--grid-gutter-x)} / 2);
  //width: 100%; // breaks desktop toc panel
}

// Columns

@mixin make-col($size, $isPx: false) {
  flex: 0 0 auto;
  @if $isPx == true {
    box-sizing: content-box;
    width: #{$size}px;
  } @else {
    width: math.percentage(math.div($size, 100));
  }
}

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

@mixin make-col-offset($size) {
  margin-left: if($size == 0, 0, math.percentage(math.div($size, 100)));
}

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

    @include breakpoints-mixins.media-breakpoint-up($breakpoint, $breakpoints) {
      .col#{$infix} {
        flex: 1 0 0%;
        min-height: 0;
        min-width: 0;
      }

      // Auto (i.e. shrink to fit)

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

      // Columns: 5-100

      @for $i from 1 through $columns {
        $value: $i * 5;

        .col#{$infix}-#{$value} {
          @include make-col($value);
        }
      }

      // Offsets: 0-100

      @for $i from 0 through ($columns - 1) {
        $value: $i * 5;

        .col#{$infix}-offset-#{$value} {
          @include make-col-offset($value);
        }
      }

      // Columns: 16, 33, 66

      @each $i in variables.$grid-columns-one-off-widths {
        .col#{$infix}-#{math.floor($i)} {
          @include make-col($i);
        }
      }

      // Offsets: 16, 33, 66

      @each $i in variables.$grid-columns-one-off-widths {
        .col#{$infix}-offset-#{math.floor($i)} {
          @include make-col-offset($i);
        }
      }

      // Columns: ads
      // We need to use "da" instead of "ad", otherwise ad blockers remove these elements...

      @each $i in variables.$grid-columns-ad-widths {
        .col#{$infix}-da-#{$i} {
          @include make-col($i, true);
        }
      }

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

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

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