.#{$global-class-prefix}ui {

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

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

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

	.u-text-justify {
		text-align: justify;
	}

	.u-align-top {
		justify-content: flex-start;
	}

	.u-align-middle {
		justify-content: center;
	}

	.u-align-bottom {
		justify-content: flex-end;
	}

	@media #{$tablet} {

		.u-text-left-tablet {
			text-align: left;
		}

		.u-text-center-tablet {
			text-align: center;
		}

		.u-text-right-tablet {
			text-align: right;
		}

		.u-text-justify-tablet {
			text-align: justify;
		}

		.u-align-top-tablet {
			justify-content: flex-start;
		}

		.u-align-middle-tablet {
			justify-content: center;
		}

		.u-align-bottom-tablet {
			justify-content: flex-end;
		}
	}

	@media #{$mobile} {

		.u-text-left-mobile {
			text-align: left;
		}

		.u-text-center-mobile {
			text-align: center;
		}

		.u-text-right-mobile {
			text-align: right;
		}

		.u-text-justify-mobile {
			text-align: justify;
		}

		.u-align-top-mobile {
			justify-content: flex-start;
		}

		.u-align-middle-mobile {
			justify-content: center;
		}

		.u-align-bottom-mobile {
			justify-content: flex-end;
		}
	}

	.u-full-width {
		width: 100vw;
		margin-left: calc( 50% - 50vw );
		margin-right: calc( 50% - 50vw );
	}

	&:not( .is-canvas ) {

		@media #{$mobile} {

			.u-hidden-mobile {
				display: none !important;
			}
		}

		@media #{$tablet} {

			.u-hidden-tablet {
				display: none !important;
			}
		}

		@media #{$desktop} {

			.u-hidden-desktop {
				display: none !important;
			}
		}
	}
}