@use "sass:math";

$gridSizesMap: (
    "sm":  576px,
    "md":  768px,
    "lg":  992px,
    "xl":  1200px,
    "xxl": 1400px,
);

.grid {
    --gridGap: var(--baseSpacing);

    position: relative;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    row-gap: var(--gridGap);
    margin: 0 calc(-0.5 * var(--gridGap));
    &.grid-center {
        align-items: center;
    }
    &.grid-sm {
        --gridGap: var(--smSpacing);
    }
    .form-field {
        margin-bottom: 0;
    }
    > * {
        margin: 0 calc(0.5 * var(--gridGap));
    }
}

%col {
    position: relative;
    width: 100%;
    min-height: 1px;
}

// grid
// -------------------------------------------------------------------

@mixin colsWidthGenerator($prefix: '') {
    // normalize prefix
    @if $prefix != '' and str-index($prefix, '-') != 1 {
        $prefix: '-#{$prefix}';
    }

    .col#{$prefix}-auto {
        flex: 0 0 auto;
        width: auto;
    }

    @for $i from 12 through 1 {
        .col#{$prefix}-#{$i} {
            width: calc(math.div(100%, math.div(12, $i)) - var(--gridGap));
        }
    }
}

// base screen size cols
@for $i from 12 through 1 {
    .col-#{$i} {
        @extend %col;
    }
}
@include colsWidthGenerator();

// screen size specific cols
@each $name, $size in $gridSizesMap {
    @for $i from 12 through 1 {
        .col-#{$name}-#{$i} {
            @extend %col;
        }
    }
    @media (min-width: #{$size}) {
        @include colsWidthGenerator($name);
    }
}