//----------------------------------------------------------------------------------------------------------------------
// TEXT ALIGNMENT
//----------------------------------------------------------------------------------------------------------------------

@each $align in (left, right, center, justify) {
/// Text alignment.
/// @name .text-align-[left|right|center|justify]
/// @group base
	.text-align-#{$align} {
		text-align: $align;
	}

	// Viewport classes
	@each $size, $breakpoint in (
		"s": $breakpoint-s,
		"m": $breakpoint-m,
		"l": $breakpoint-l,
		"switch": $breakpoint-switch
	) {
/// Text alignment for specific viewports and up.
/// @name .text-align-[s|m|l|nav]-[left|right|center|justify]
/// @group base
		.text-align-#{$size}-#{$align} {
			@include media(">=", $breakpoint) {
				text-align: $align;
			}
		}
	}
}