.flex,
.flex-reverse {
	display: flex;
	flex-wrap: nowrap;
	max-width: 100%;

	& > * {
		flex: 0 0 auto;
	}

	&.gutters {
		padding: calc(var(--gutter) / 2);

		.text {
			margin: 0 calc(var(--gutter) / 2);
		}
	}

	&.wrap {
		flex-wrap: wrap;
	}

	&.wrap-reverse {
		flex-wrap: wrap-reverse;
	}
}

.flex {
	flex-direction: row;

	&.column {
		flex-direction: column;
	}
}

.flex-reverse {
	flex-direction: row-reverse;

	&.column {
		flex-direction: column-reverse;
	}
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex-auto {
	flex: 1 1 auto;
}

@for $fraction from 1 through 12 {
	.flex-#{$fraction} {
		flex: #{$fraction} #{$fraction} 100px;
	}
}

.justify-start {
	justify-content: flex-start;
}

.justify-center {
	justify-content: center;
}

.justify-end {
	justify-content: flex-end;
}

.justify-space-around {
	justify-content: space-around;
}

.justify-space-between {
	justify-content: space-between;
}

.justify-space-evenly {
	justify-content: space-evenly;
}

.align-content-start {
	align-content: start;
}

.align-content-center {
	align-content: center;
}

.align-content-end {
	align-content: end;
}

.align-content-space-around {
	align-content: space-around;
}

.align-content-space-between {
	align-content: space-between;
}

.align-content-space-evenly {
	align-content: space-evenly;
}

.align-items-start {
	align-items: start;
}

.align-items-center {
	align-items: center;
}

.align-items-end {
	align-items: end;
}

.align-items-stretch {
	align-items: stretch;
}

.align-self-start {
	align-self: start;
}

.align-self-center {
	align-self: center;
}

.align-self-end {
	align-self: end;
}

.align-self-stretch {
	align-self: stretch;
}