@use '../configs' as configs;
@use 'sass:meta' as meta;
@use 'sass:math' as math;
@use 'bootstrap/scss/functions' as functions;
@use 'bootstrap/scss/mixins' as mixins;

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

$grid-gutter-width: 1rem;
$grid-row-columns: 0;
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  // xl: 1200px,
);

@mixin make-row($gutter: $grid-gutter-width) {
  --gutter-x: #{$gutter};
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--gutter-y) * -1);
  margin-inline: calc(var(--gutter-x) * -0.5);
}

@mixin make-col-ready($gutter: $grid-gutter-width) {
  // Add box sizing if only the grid is loaded
  box-sizing: if(
    meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing,
    border-box,
    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-inline: calc(var(--gutter-x) * 0.5);
  margin-top: var(--gutter-y);
}

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

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

@mixin make-col-offset($size, $columns: configs.$grid-columns) {
  $num: functions.divide($size, $columns);
  margin-inline-end: if($num == 0, 0, math.percentage($num));
}

// Row columns
// Specify on a parent element(e.g., .row) to force immediate children into NN
// numberof columns. Supports wrapping to new lines, but does not do a Masonry
// style grid.
@mixin row-cols($count) {
  > * {
    flex: 0 0 auto;
    width: functions.divide(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: configs.$grid-columns,
  $gutter: $grid-gutter-width,
  $breakpoints: $grid-breakpoints
) {
  @each $breakpoint in map-keys($breakpoints) {
    $infix: mixins.breakpoint-infix($breakpoint, $breakpoints);

    @include mixins.media-breakpoint-up($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex: 1 0 0; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
      }

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

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

      // Gutters
      // Make use of `.g-*`, `.gx-*` or `.gy-*` utilities to change spacing between the columns.
      @each $key, $value in configs.$gutters {
        .g-#{$key} {
          --gutter-x: #{$value};
          --gutter-y: #{$value};
        }
      }
    }
  }
}

// Row
// Rows contain your columns.

.row {
  @include make-row;

  > * {
    @include make-col-ready;
  }
}

// Columns
// Common styles for small and large grid columns

@include make-grid-columns;