/*===============================================================================
 * Split layout in 2 equal columns
 *
 * Until viewport is wide enough the columns are stacked vertically
 * ============================================================================== */


.l-split {
	position: relative;
	background-color: palette(light);
	height: 100%; // stretch it out in its container

	// Set side by side from medium viewports and up
	@include mq(m) {
		@include flex();
	}
}


/**
 * Special contain version for split.
 * Doesn't restrain content on medium viewport
 */

.l-split--contain {
		@include contain($onMedium: false);
}


.l-split__column {

	// On desktop columns are 50/50
	@include mq(l) {
		width: column(6, 12);
	}

	// Main content goes first, usually text
	&:first-child {
		@include mq(m, l) {
			width: column(5, 8);
			padding-right: column(1, 8);
		}
		@include mq(l) {
			padding-left: column(1, 12);
			padding-right: column(1, 12);
		}
	}

	// secondary content goes last, usually an image or aside text
	&:last-child {
		// Create vertical spacing on mobile
		@include vspacing-s(
				'margin-top' 0.5
		);
		@include mq(m, l) {
			width: column(3, 8);
		}
	}

	// Visually switch columns on medium & large viewports
	.l-split--is-reversed & {
		&:first-child {
			order: 2;

			@include mq(m, l) {
				padding-left: column(1, 8);
				padding-right: 0;
			}
			@include mq(l) {
				padding-left: column(1, 12);
			}
		}
	}
}

@include mq(m, l) {
	.l-split--breakout-on-m {
		.l-split__column {
			&:first-child {
				width: column(6, 10);
				padding-left: column(1, 10);
				padding-right: column(1, 10);
			}
			&:last-child {
				width: column(4, 10);
			}
		}
	}
}


/**
 * When there is only 1 column, align it to the middle and contain the width
 * Only one column is used e.g. in the tabslider when there is no image set
 */
.l-split__column:only-child {
	@include mq(m) {
		margin: 0 auto;
		width: column(6, 8);
		padding-left: 0;
		padding-right: 0;
	}
	@include mq(l) {
		width: column(6, 12);
		padding-left: 0 !important;
	}
}


// Columns that have text instead of an image need some padding on top
// to align them with the other column that has padding-top too
.l-split__column--vpad {
	margin-top: space(5);
	margin-bottom: space(5);

	@include mq(m){
		margin-top: space(10);
		margin-bottom: space(10);
	}
}


// Create a column extra white space to the left (on large viewports)
@include mq(l) {
	.l-split__column--leftpad {
		padding-left: column(1,12);
	}
}