// RIVER Design-System: Helpers - Flex Cols //

// A Flex helper for displaying flex columns, built using 'display: flex'.
// The parent class of '.flex-cols' defines the columns, with required child columns of '.flex-col'.
// Variations: 'inline', 'center', 'justify', 'equal' (make inner .flex-cols equal size)
// Variations for gap size: 'small', 'normal', 'large', 'nogap'
// Variations for child .flex-col: 'auto', 'full', 'fixed'

// With flex-cols, we define the column width on each child element, not on the parent.
// We generally use flex-cols alongside our width helpers, such as .width--50%, .width--6/12, etc

// Example usage:
// <div class="flex-cols"><div class="flex-col width--12/12 md:width--6/12">...</div></div>

@if(design-setting('helpers') and design-setting('helpers.flex-cols', false)) {
    /* RIVER Design-System: Helpers - Flex Cols */

    // Flex Cols Class (parent)
    .flex-cols {
        --column-gap: #{design-variable(design-setting('flex-cols.gutter-variable')...)};
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch; // stretch columns so they're all the same height
    }
    :where(.flex-cols) {
        // Low specificity
        margin-left: calc(var(--column-gap) * -1);
        margin-right: calc(var(--column-gap) * -1);
    }

    // Flex Col Class (child)
    .flex-col {
        max-width: 100%;
    }
    :where(.flex-col) {
        // Low specificity
        padding-left: var(--column-gap);
        padding-right: var(--column-gap);
    }

    // Flex Cols Class (parent) - Variations
    @if(design-setting('flex-cols.variations')) {
        .flex-cols--inline {
            display: inline-flex;
        }
        .flex-cols--center {
            justify-content: center;
        }
        .flex-cols--justify {
            justify-content: space-between;
            align-content: space-between;
        }
        .flex-cols--equal {
            > *:where(.flex-col) {
                flex: 1 0 0%; // equal size
            }
        }
        // Size Variations
        .flex-cols--small {
            --column-gap: #{design-variable('sizes.gutter.small', 'sizes.size.small', 2rem)};
        }
        .flex-cols--normal {
            --column-gap: #{design-variable('sizes.gutter.normal', 'sizes.size.normal', 3rem)};
        }
        .flex-cols--large {
            --column-gap: #{design-variable('sizes.gutter.large', 'sizes.size.large', 4rem)};
        }
        .flex-cols--nogap {
            --column-gap: 0;
        }
    }

    // Responsive
    @include design-breakpoints-query-up() using ($variation, $breakpoint) {
        $variation: design-transform-class-name($variation);

        // Columns Helpers
        // eg, .flex-col--auto, .md:flex-col--full, etc
        @if(design-setting('flex-cols.col-helpers')) {
            .#{$variation}flex-col--auto {
                flex: 1 0 0%; // equal size
            }
            .#{$variation}flex-col--full {
                flex: 0 0 100%; // fit entire space horizontally
                // flex: 0 0 auto; // no grow, no shrink
                // width: 100%;
            }
            .#{$variation}flex-col--fixed {
                flex: 0 0 auto; // no grow, no shrink
            }
        }

    }

}