Asymmetrik/ngx-starter

@use 'sass:map';
@use 'sass:math';
@import 'shared';

$enable-nav-aware-grid-classes: true !default;

// Modified copy of make-grid-columns from Bootstrap (node_modules/bootstrap/scss/mixins/_grid-framework.scss).
// Creates 'col-na' classes vs 'col'.
@mixin make-nav-aware-grid-columns(
    $columns: $grid-columns,
    $gutter: $grid-gutter-width,
    $breakpoints: $grid-breakpoints
) {
    // Common properties for all breakpoints
    %na-grid-column {
        position: relative;
        width: 100%;
        padding-right: math.div($gutter, 2);
        padding-left: math.div($gutter, 2);
    }

    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);
        $infix: -na#{$infix};

        // Allow columns to stretch full width below their breakpoints
        @for $i from 1 through $columns {
            .col#{$infix}-#{$i} {
                @extend %na-grid-column;
            }
        }
        .col#{$infix},
        .col#{$infix}-auto {
            @extend %na-grid-column;
        }

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Provide basic `.col-{bp}` classes for equal-width flexbox columns
            .col#{$infix} {
                flex-basis: 0;
                flex-grow: 1;
                max-width: 100%;
            }
            .col#{$infix}-auto {
                flex: 0 0 auto;
                width: auto;
                max-width: 100%; // Reset earlier grid tiers
            }

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

            .order#{$infix}-first {
                order: -1;
            }

            .order#{$infix}-last {
                order: $columns + 1;
            }

            @for $i from 0 through $columns {
                .order#{$infix}-#{$i} {
                    order: $i;
                }
            }

            // `$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 .offset-0
                    .offset#{$infix}-#{$i} {
                        @include make-col-offset($i, $columns);
                    }
                }
            }
        }
    }
}

@if $enable-nav-aware-grid-classes and $enable-grid-classes {
    $nav-opened-grid-breakpoints: ();

    @each $key, $value in $grid-breakpoints {
        $bp: $value + $nav-open-width - $nav-closed-width;
        @if $value == 0 {
            $bp: 0;
        }
        $nav-opened-grid-breakpoints: map.merge(
            $nav-opened-grid-breakpoints,
            (
                $key: $bp
            )
        );
    }

    @include make-nav-aware-grid-columns(
        $grid-columns,
        $grid-gutter-width,
        $nav-opened-grid-breakpoints
    );

    .navbar-close {
        @include make-nav-aware-grid-columns($grid-columns, $grid-gutter-width, $grid-breakpoints);
    }
}