$gap_neg: calc(var(--gap) * -1);
// $gap_div_2: calc(var(--gap) / 2);
// $gap_div_2_neg: calc(var(--gap) / -2);

.row {
    display: flex !important;
    flex-flow: row wrap;
    @include space($gap_neg, $direction: "horizontal");
    margin-top: $gap_neg;

    &:not(:last-child) {
        margin-bottom: var(--gap);
    }

    > .col {
        --gap: #{$gutter};

        position: relative;
        flex: 1 1 0;
        padding: var(--gap);
        // @include space(var(--gap), $direction: "horizontal", $name: "padding");
        // @include space(var(--gap), $direction: "bottom", $name: "padding");
    }

    @each $screen in map-keys($tab-screen) {
        @include media-screen($screen) {
            $infix: infix-elt($screen, $tab-screen);

            > .col {
                @for $i from 1 through $columns{
                    $width: percentage($i / $columns);

                    &.#{$infix}of-#{$i}{ flex: 0 1 $width; }
                    &.#{$infix}offset-#{$i}{ @include space($width, $direction: "left"); }
                }
            }

            @for $i from 0 through 5 {
                &.#{$infix}gap-#{$i} {
                    $gap: if($i == 0, 0, $gutter * $i);
                    --gap: #{$gap};

                    > .col {
                        --gap: #{$gap};
                    }
                }
            }
        }
    }

}


@each $screen in map-keys($tab-screen) {
    @include media-screen($screen) {
        $infix: infix-elt($screen, $tab-screen);

        @each $direction in (row, column) {
            $label: $infix + "flex" + capitalize(if($direction == column, "col", $direction));

            .#{$label} {
                flex-direction: $direction;
            }
            .#{$label}Reverse {
                flex-direction: #{$direction}-reverse;
            }
        }

        @each $axe in (justify, align) {
            @each $item in (content, items, self) {
                @each $name, $value in $tab-flex-value-label {
                    $label: $infix + $axe + capitalize($item) + "-" + $name;

                    .#{$label} {
                        #{$axe}-#{$item}: $value;
                    }
                }

            }
        }

        @for $iter from 0 through 5 {
            .#{$infix}flexGrow-#{$iter} {
                flex-grow: $iter !important;
            }
            .#{$infix}order-#{$iter}{ order: $iter; }
        }
    }
}

@each $label, $value in $tab-flex-wrap {
    .flex#{capitalize($label)} {
        flex-wrap: $value;
    }
}