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 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;

	&--multiRow {
		@include RV-FlexRow__Container--multiRow;
	}

	&--column {
		@include RV-FlexRow__Container--column;
	}
}

@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 {
	@include RV-Alignment;

	min-width: min-content;
	width: 100%;

	&,&--normal {
		@include RV-FlexRow__Item--normal;
	}

	&--narrower {
		@include RV-FlexRow__Item--narrower;
	}

	&--narrow {
		@include RV-FlexRow__Item--narrow;
	}

	&--wide {
		@include RV-FlexRow__Item--wide;
	}

	&--wider {
		@include RV-FlexRow__Item--wider;
	}

	&--fixedSize {
		@include RV-FlexRow__Item--fixedSize;
	}
}

@mixin RV-FlexRow {
	&__Container {
		@include RV-FlexRow__Container;
	}

	&__Item {
		@include RV-FlexRow__Item;
	}
}

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