/**
 * Row
 */

@use '../../../css/mixins' as mixins;
@use 'sass:list';

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;

    @each $breakpoint-key in mixins.$breakpoint-keys {
        @include mixins.breakpoint-up($breakpoint-key) {
            margin-left: calc(var(--grid--#{$breakpoint-key}--gutter) / -2);
            margin-right: calc(var(--grid--#{$breakpoint-key}--gutter) / -2);
        }
    }

    // Reverse row
    //
    &.-reverse {
        flex-direction: row-reverse;
    }

    // No gutter
    //
    &.-no-gutter {
        margin-left: 0;
        margin-right: 0;

        > .column {
            padding-left: 0;
            padding-right: 0;
        }
    }

    // No collapse
    //
    &.-no-collapse {
        flex-flow: row nowrap;
    }

    // Responsive Flex Alignments
    //
    @each $breakpoint-key in list.append(mixins.$breakpoint-keys, '') {
        $breakpoint: mixins.breakpoint-infix($breakpoint-key);

        @include mixins.breakpoint-up($breakpoint-key) {
            &.-start#{$breakpoint} {
                justify-content: flex-start;
                text-align: start;
            }

            &.-center#{$breakpoint} {
                justify-content: center;
                text-align: center;
            }

            &.-end#{$breakpoint} {
                justify-content: flex-end;
                text-align: end;
            }

            &.-top#{$breakpoint} {
                align-items: flex-start;
            }

            &.-middle#{$breakpoint} {
                align-items: center;
            }

            &.-bottom#{$breakpoint} {
                align-items: flex-end;
            }

            &.-around#{$breakpoint} {
                justify-content: space-around;
            }

            &.-between#{$breakpoint} {
                justify-content: space-between;
            }

            &.-reverse#{$breakpoint} {
                flex-direction: row-reverse;
            }
        }
    }
}