/* ---------- 24 Grid  ----------- */
@use "sass:math";

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px) !default;

// scss-docs-start spacer-variables-maps
$spacer: 0.5rem !default;
$spacers: (
    0: 0,
    1: $spacer * .25,
    2: $spacer * .5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3,
    ) !default;
// scss-docs-end spacer-variables-maps

$spacer-utilities: (
    // Gap 
    "gap": (property: ex-gap,
        class: ex-gap,
        values: $spacers ),
    "row-gap": (property: ex-row-gap,
        class: ex-row-gap,
        values: $spacers ),
    "column-gap": (property: ex-column-gap,
        class: ex-column-gap,
        values: $spacers )
);



$ex-grid-columns: 24;
$ex-grid-gutter-width: 0.75rem;
$ex-prefix: ex-;
$ex-gutters: $spacers !default;


// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$ex-grid-row-columns: 12 !default;

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

@mixin make-row($gutter: $ex-grid-gutter-width) {
    --#{$ex-prefix}gutter-x: #{$gutter};
    --#{$ex-prefix}gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
    margin-top: calc(-1 * var(--#{$ex-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
    margin-right: calc(-.5 * var(--#{$ex-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
    margin-left: calc(-.5 * var(--#{$ex-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
}

@mixin make-col-ready() {
    // Add box sizing if only the grid is loaded
    box-sizing: if(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 `.ex-col-auto`, `.ex-col` (& responsive variants) from breaking out the grid
    padding-right: calc(var(--#{$ex-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
    padding-left: calc(var(--#{$ex-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
    margin-top: var(--#{$ex-prefix}gutter-y);
}

@mixin make-col($size: false, $columns: $ex-grid-columns) {
    @if $size {
        flex: 0 0 auto;
        width: 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-offset($size, $columns: $ex-grid-columns) {
    $num: math.div($size, $columns);
    margin-left: if($num ==0, 0, percentage($num));
}

// Row columns
//
// Specify on a parent element(e.g., .ex-row) 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: percentage(math.div(1, $count));
    }
}

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

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

        @include media-breakpoint-up($breakpoint, $breakpoints) {

            // Provide basic `.ex-col-{bp}` classes for equal-width flexbox columns
            .ex-col#{$infix} {
                flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
            }

            .ex-row-cols#{$infix}-auto>* {
                @include make-col-auto();
            }

            @if $ex-grid-row-columns >0 {
                @for $i from 1 through $ex-grid-row-columns {
                    .ex-row-cols#{$infix}-#{$i} {
                        @include row-cols($i);
                    }
                }
            }

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

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

                // `$columns - 1` because offsetting by the width of an entire row isn't possible
                @for $i from 0 through ($columns - 1) {
                    @if not ($infix =="" and $i ==0) {

                        // Avoid emitting useless .ex-offset-0
                        .ex-offset#{$infix}-#{$i} {
                            @include make-col-offset($i, $columns);
                        }
                    }
                }
            }

            // Gutters
            //
            // Make use of `.ex-g-*`, `.ex-gx-*` or `.ex-gy-*` utilities to change spacing between the columns.
            @each $key, $value in $ex-gutters {

                .ex-g#{$infix}-#{$key},
                .ex-gx#{$infix}-#{$key} {
                    --#{$ex-prefix}gutter-x: #{$value};
                }

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

@mixin make-cssgrid($columns: $ex-grid-columns, $breakpoints: $grid-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 {
                    .ex-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) {
                    .ex-g-start#{$infix}-#{$i} {
                        grid-column-start: $i;
                    }
                }
            }
        }
    }
}


/*  with 24 columns */
// Row
//
// Rows contain your columns.

.ex-row {
    @include make-row();

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

// Columns
//
// Common styles for small and large grid columns
@include make-grid-columns();




/*

It is only valid after the following code of bootstrap is included by default:

*,
*::before,
*::after {
  box-sizing: border-box;
}
*/