@layer utils {
	.u-flex-horizontal {
		display: flex;
		flex-direction: row;
	}

	.u-flex-vertical {
		display: flex;
		flex-direction: column;
	}

	$flex-directions: row, row-reverse, column, column-reverse;
	$align-items-values: flex-start, flex-end, center, baseline, stretch;
	$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly;

	@each $direction in $flex-directions {
		.u-flex-direction-#{$direction} {
			flex-direction: $direction;
		}
	}

	@each $value in $align-items-values {
		.u-align-items-#{$value} {
			align-items: $value;
		}
	}

	@each $value in $justify-content-values {
		.u-justify-content-#{$value} {
			justify-content: $value;
		}
	}
}
