// 1. Prevent SVG icons from shrinking.
// 2. Use `display: grid` so the orientation of alignmentX and alignmentY does not change as it would with `flex-direction: column`.
// 3. Generate both `wrap` and `noWrap` classes to enable mobile-first and breakpoint-specific wrapping at the same time.

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

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

.Flex > svg {
    flex: none; // 1.
}

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

    @include breakpoint.up($breakpoint-value) {
        .Flex--#{$infix}row {
            display: flex;
        }

        .Flex--#{$infix}column {
            display: grid; // 2.
        }

        .Flex--#{$infix}wrap {
            flex-wrap: wrap; // 3.
        }

        .Flex--#{$infix}noWrap {
            flex-wrap: nowrap; // 3.
        }

        @include dictionaries.generate-alignments(
            $class-name: 'Flex',
            $dictionary-values: theme.$alignment-x-dictionary,
            $axis: 'x',
            $infix: $infix
        );
        @include dictionaries.generate-alignments(
            $class-name: 'Flex',
            $dictionary-values: theme.$alignment-y-dictionary,
            $axis: 'y',
            $infix: $infix
        );
    }
}
