//------------------------------------------------------------------------------------------------
// ALIGNMENTS
//------------------------------------------------------------------------------------------------

/*
Utility classes for easily aligning elements and text
*/

// CLASSES
//------------------------------------------------------------------------------------------------

.u-align-left {
	text-align: left !important;
}

.u-align-center {
	text-align: center !important;
}

.u-align-right {
	text-align: right !important;
}

.u-flex-middle,
.u-flex-align-center,
.u-flex-center-all {
	display: flex !important;
	align-items: center !important;
}

.u-flex-center,
.u-flex-justify-center,
.u-flex-center-all {
	display: flex !important;
	justify-content: center !important;
}

.u-flex-justify-start,
.u-flex-left {
	display: flex !important;
	justify-content: flex-start !important;
}

.u-flex-justify-end,
.u-flex-right {
	display: flex !important;
	justify-content: flex-end !important;
}

.u-flex-align-start,
.u-flex-top {
	display: flex !important;
	align-items: flex-start !important;
}

.u-flex-align-end,
.u-flex-bottom {
	display: flex !important;
	align-items: flex-end !important;
}

// Changes alignment when breakpoint is hit
// Example: .u-align-left@md, .u-flex-alig-end@md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		.u-align-left\@#{$bp-name} {
			text-align: left !important;
		}

		.u-align-center\@#{$bp-name} {
			text-align: center !important;
		}

		.u-align-right\@#{$bp-name} {
			text-align: right !important;
		}

		.u-flex-middle\@#{$bp-name},
		.u-flex-align-center\@#{$bp-name},
		.u-flex-center-all\@#{$bp-name} {
			display: flex !important;
			align-items: center !important;
		}

		.u-flex-center\@#{$bp-name},
		.u-flex-justify-center\@#{$bp-name},
		.u-flex-center-all\@#{$bp-name} {
			display: flex !important;
			justify-content: center !important;
		}

		.u-flex-justify-start\@#{$bp-name},
		.u-flex-left\@#{$bp-name} {
			display: flex !important;
			justify-content: flex-start !important;
		}

		.u-flex-justify-end\@#{$bp-name},
		.u-flex-right\@#{$bp-name} {
			display: flex !important;
			justify-content: flex-end !important;
		}

		.u-flex-align-start\@#{$bp-name},
		.u-flex-top\@#{$bp-name} {
			display: flex !important;
			align-items: flex-start !important;
		}

		.u-flex-align-end\@#{$bp-name},
		.u-flex-bottom\@#{$bp-name} {
			display: flex !important;
			align-items: flex-end !important;
		}
	}
}