////
/// Alignment classes.
///
/// @group  Utilities
/// @author Lee Anthony <seothemeswp@gmail.com>
/// @link   https://CustomizePro.com/
////

.align {

	&center,
	&left,
	&right {
		display: block;
		float: none;
		margin: 0 auto $spacing--m;
	}

	&left {

		@include mq(m) {
			float: left;
			margin: 0 $spacing--m $spacing--m 0;
		}
	}

	&right {

		@include mq(m) {
			float: right;
			margin: 0 0 $spacing--m $spacing--m;
		}
	}

	&center {

		@include clearfix;
	}

	&full,
	&wide {

		.narrow-content &,
		.full-width-content & {

			@include mq(0, m) {
				width: 100vw;
			}
		}
	}

	.narrow-content &full,
	.full-width-content &full {

		@include mq(m) {
			width: 100vw;
			max-width: 100vw;
			margin-right: calc(-100vw / 2 + 100% / 2);
			margin-left: calc(-100vw / 2 + 100% / 2);
		}
	}

	.narrow-content &wide,
	.full-width-content &wide {

		@include mq(m) {
			width: 140%;
			max-width: 140%;
			margin-right: -20%;
			margin-left: -20%;
		}
	}

}

.flex {
	display: flex;

	&-start {
		margin-right: auto;

		&-desktop {

			@include mq(m) {
				margin-right: auto;
			}
		}
	}

	&-center {
		margin-right: auto;
		margin-left: auto;

		&-desktop {

			@include mq(m) {
				margin-right: auto;
				margin-left: auto;
			}
		}
	}

	&-end {
		margin-left: auto;

		&-desktop {

			@include mq(m) {
				margin-left: auto;
			}
		}
	}
}


.justify {

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

	&-center {
		justify-content: center;
	}

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

	&-full {
		justify-content: space-between;
	}
}