scss-library/components/01_Layouts/flexRow/_flexRow.scss

@mixin RV-FlexRow__Container--column {
    display: flex;
    flex-direction: column;
}

@mixin RV-FlexRow__Container--multiRow {
    flex-wrap: wrap;
}

@mixin RV-FlexRow__Container--horizontal($-break_width: 500px) {
    flex-direction: row;
    flex-wrap: wrap;

    * {
        flex-basis: calc(#{$-break_width} * 999 - 100% * 999);
    }
}

@mixin RV-FlexRow__Container--vertical {
    flex-direction: column;
}

@mixin RV-FlexRow__Container($-prefix: '&') {
    display: flex;
    height: 100%;
}

@mixin RV-FlexRow__Container--advanced($-break_width: 500px, $-prefix: '&') {
    #{$-prefix}--multiRow {
        @include RV-FlexRow__Container--multiRow;
    }

    #{$-prefix}--column {
        @include RV-FlexRow__Container--column;
    }

    #{$-prefix}--horizontal {
        @include RV-FlexRow__Container--horizontal(#{$-break_width});
    }

    #{$-prefix}--vertical {
        @include RV-FlexRow__Container--vertical;
    }
}

@mixin RV-FlexRow__Item--normal {
    flex-grow: 3;
    flex-shrink: 3;
}

@mixin RV-FlexRow__Item--narrower {
    flex-grow: 1;
    flex-shrink: 5;
}

@mixin RV-FlexRow__Item--narrow {
    flex-grow: 2;
    flex-shrink: 4;
}

@mixin RV-FlexRow__Item--wide {
    flex-grow: 4;
    flex-shrink: 2;
}

@mixin RV-FlexRow__Item--wider {
    flex-grow: 5;
    flex-shrink: 1;
}

@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
    flex-grow: 0;
    flex-shrink: 0;
    width: min-content;
    flex-basis: $-width;
}

@mixin RV-FlexRow__Item($-prefix: '&') {
    min-width: min-content;
    width: 100%;

    #{$-prefix},
    #{$-prefix}--normal {
        @include RV-FlexRow__Item--normal;
    }
}

@mixin RV-FlexRow__Item--advanced($-prefix: '&') {
    @include RV-Alignment;

    #{$-prefix}--narrower {
        @include RV-FlexRow__Item--narrower;
    }

    #{$-prefix}--narrow {
        @include RV-FlexRow__Item--narrow;
    }

    #{$-prefix}--wide {
        @include RV-FlexRow__Item--wide;
    }

    #{$-prefix}--wider {
        @include RV-FlexRow__Item--wider;
    }

    #{$-prefix}--fixedSize {
        @include RV-FlexRow__Item--fixedSize;
    }
}

@mixin RV-FlexRow--multiRow($-prefix: '&') {
    #{$-prefix}__Container {
        @include RV-FlexRow__Container--multiRow;
    }
}

@mixin RV-FlexRow($-prefix: '&') {
    #{$-prefix}__Container {
        @include RV-FlexRow__Container($-prefix: $-prefix);
    }

    #{$-prefix}__Item {
        @include RV-FlexRow__Item($-prefix: $-prefix);
    }
}

@mixin RV-FlexRow--advanced($-break_width: 500px, $-prefix: '&') {
    #{$-prefix}__Container {
        @include RV-FlexRow__Container--advanced($-break_width, $-prefix: $-prefix);
    }

    #{$-prefix}__Item {
        @include RV-FlexRow__Item--advanced($-prefix: $-prefix);
    }
}

.RV-FlexRow {
    @include RV-FlexRow;
    @include RV-FlexRow--advanced;
}