@use 'sass:math';

@mixin flex($align: stretch, $justify: flex-start, $wrap: nowrap, $direction: row, $display: flex) {
	display: $display;
	flex-flow: $direction $wrap;
	align-items: $align;
	justify-content: $justify;
}

@mixin flex-row($wrap: nowrap, $align: stretch, $justify: flex-start) {
	@include flex($align, $justify, $wrap);
}

@mixin flex-column($wrap: nowrap, $align: stretch, $justify: flex-start) {
	@include flex($align, $justify, $wrap, column);
}

@mixin inline-flex-row($wrap: nowrap, $align: stretch, $justify: flex-start) {
	@include flex($align, $justify, $wrap, row, inline-flex);
}

@mixin inline-flex-column($wrap: nowrap, $align: stretch, $justify: flex-start) {
	@include flex($align, $justify, $wrap, column, inline-flex);
}

@mixin flex-row-center($wrap: nowrap) {
	@include flex-row($wrap, center, center);
}

@mixin flex-column-center($wrap: nowrap) {
	@include flex-column($wrap, center, center);
}

@mixin grid() {
	@each $breakpoint, $width in $breakpoints {
		@media (min-width: #{map-get($width, min)}) {
			@for $i from 1 through $columns {
				$size: math.div($i, $columns) * 100%;

				.#{$breakpoint}-#{$i} {
					max-width: $size;
					flex: 0 0 $size;
				}
			}
		}
	}
}