@use "sass:math";
@use "../abstracts/breakpoints" as bp;

$breakpoints: bp.$breakpoints;
$total-columns: 12;



@mixin generate-grid-columns($suffix: null) {
    @for $i from 1 through $total-columns {

        $width: math.div(100% * $i, $total-columns);
        $gap-compensation: math.div($total-columns - $i, $total-columns);

        @if $suffix != null {
            .g-col-#{$i}-#{$suffix} {
                flex: 0 0 calc(#{$width} - (var(--grid-gap) * #{$gap-compensation}));
                max-width: calc(#{$width} - (var(--grid-gap) * #{$gap-compensation}));
            }
        } @else {
            .g-col-#{$i} {
                flex: 0 0 calc(#{$width} - (var(--grid-gap) * #{$gap-compensation}));
                max-width: calc(#{$width} - (var(--grid-gap) * #{$gap-compensation}));
            }
        }
    }
}


.grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
}


.grid > * {
    padding-inline: var(--grid-padding-x);
    padding-block: var(--grid-padding-y);
    min-width: 0;
}


.g-col {
    flex: 1 0 0;
}


@include generate-grid-columns();


@each $bp, $size in $breakpoints {
    @media (min-width: #{$size}) {
        @include generate-grid-columns($bp);
    }
}