@use "sass:math";
@use "../050-layout/basics/" as *;
@use "../050-layout/layout_breakpoints" as *;

// section based on bootstrap 5 - see /templates/default/Guidelines_SCSS-Coding.md

//
// Bootstrap 5: _variables.scss
//

$grid-columns: 12 !default;
$prefix: bs- !default;

$enable-grid-classes: true !default;
$enable-cssgrid: false !default;

$grid-row-columns: 6 !default;

// Prefix for :root CSS variables

//
// Bootstrap 5: _functions.scss
//
// Bootstrap 5 uses a custom function for division to maintain compatibility with other Sass variants.
// Since ILIAS is strictly using Dart Sass, we can just use the build in math function instead.
@function divide($dividend, $divisor) {
    $result: math.div($dividend, $divisor);
    @return $result;
}

//
// Bootstrap 5: _maps.scss
//

$gutters: $spacers !default;

//
// Bootstrap 5: _breakpoints.scss
//

// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.

// Name of the next breakpoint, or null for the last breakpoint.
//
//    >> breakpoint-next(sm)
//    md
//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
//    md
//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
//    md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
    $n: index($breakpoint-names, $name);

    @if not $n {
        @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
    }

    @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
//    576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
    $min: map-get($breakpoints, $name);
    @return if($min !=0, $min, null);
}

// Maximum breakpoint width.
// The maximum value is reduced by 0.02px to work around the limitations of
// `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
//    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
//    767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
    $max: map-get($breakpoints, $name);
    @return if($max and $max > 0, $max - .02, null);
}

// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
//    ""  (Returns a blank string)
//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
//    "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
    @return if(breakpoint-min($name, $breakpoints)==null, "", "-#{$name}");
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
    $min: breakpoint-min($name, $breakpoints);

    @if $min {
        @media (min-width: $min) {
            @content;
        }
    }

    @else {
        @content;
    }
}

//
// Bootstrap 5: mixins/_grid.scss
//

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

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

@mixin make-col($size: false, $columns: $grid-columns) {
    @if $size {
        flex: 0 0 auto;
        width: percentage(divide($size, $columns));

    }

    @else {
        flex: 1 1 0;
        max-width: 100%;
    }
}

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

// Row columns
//
// Specify on a parent element(e.g., .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: 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: $grid-columns, $gutter: $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 `.col-{bp}` classes for equal-width flexbox columns
            .col#{$infix} {
                flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
            }

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

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

            .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 $gutters {

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

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

@mixin make-cssgrid($columns: $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 {
                    .g-col#{$infix}-#{$i} {
                        grid-column: auto / span $i;
                    }
                }

                // Start with `1` because `0` is and 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;
                    }
                }
            }
        }
    }
}

//
// Bootstrap 5: _grid.scss
//

// Row
//
// Rows contain your columns.

@if $enable-grid-classes {
    .row {
        @include make-row();

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

@if $enable-cssgrid {
    .grid {
        display: grid;
        grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
        grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
        gap: var(--#{$prefix}gap, #{$grid-gutter-width});

        @include make-cssgrid();
    }
}


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

@if $enable-grid-classes {
    @include make-grid-columns();
}

// end of section based on bootstrap 5