// Alignment Classes
$align-class-names:
	large-desktop,
	desktop,
	tablet,
	large-mobile,
	small-mobile,
	no-mobile,
	mobile-only;

// Breakpoints
$align-class-breakpoints:
	$large-desktop-range,
	$desktop-range,
	$tablet-range,
	$large-mobile-range,
	$small-mobile-range,
	$no-mobile,
	$mobile-only;

// Create Responsive Alignment Classes
@mixin align-classes{
	.text-left {
		text-align: left !important;
	}
	.text-right {
		text-align: right !important;
	}
	.text-center {
		text-align: center !important;
	}
	.text-justify {
		text-align: justify !important;
	}

	@for $i from 1 through length($align-class-names) {
		@media #{(nth($align-class-breakpoints, $i))} {
			.#{(nth($align-class-names, $i))}-text-left { text-align: left !important; }
			.#{(nth($align-class-names, $i))}-text-right   { text-align: right !important; }
			.#{(nth($align-class-names, $i))}-text-center  { text-align: center !important; }
			.#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; }
		}
	}
}

@include align-classes;