@use '../../tools/breakpoint';
@use '../../tools/dictionaries';
@use '../../tools/reset';
@use '../../tools/responsive-properties';
@use 'theme';

.Grid {
    display: grid;
    grid-template-columns: repeat(theme.$columns, 1fr);
    width: 100%;

    @include reset.list();
    @include responsive-properties.create-cascade(
        $property: 'column-gap',
        $input-custom-property-base-name: 'grid-spacing-x',
        $breakpoints: theme.$breakpoints,
        $fallback-value: theme.$default-spacings
    );
    @include responsive-properties.create-cascade(
        $property: 'row-gap',
        $input-custom-property-base-name: 'grid-spacing-y',
        $breakpoints: theme.$breakpoints,
        $fallback-value: theme.$default-spacings
    );
}

@each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
    $infix: breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value);

    @include breakpoint.up($breakpoint-value) {
        @include dictionaries.generate-alignments(
            $class-name: 'Grid',
            $dictionary-values: theme.$alignment-x-dictionary,
            $axis: 'x',
            $property: 'justify-items',
            $infix: $infix
        );
        @include dictionaries.generate-alignments(
            $class-name: 'Grid',
            $dictionary-values: theme.$alignment-y-dictionary,
            $axis: 'y',
            $infix: $infix
        );

        @each $column in theme.$equal-columns {
            .Grid--#{breakpoint.get-modifier('infix', $breakpoint-name, $breakpoint-value)}cols-#{$column} {
                grid-template-columns: repeat(#{$column}, 1fr);
            }
        }
    }
}
