/*
* Live slide preview styling.
*
* The preview-[16x9/4x3](-fit) classes are meant to be applied to to
* the div element with the class preview-cont to select the aspect
* ratio of the preview. The preview-limit class can be used together with
* the preview-[16x9/4x3] classes to limit the maximum width of the
* preview so that width: 100% when viewport width < $preview-breakpoint.
* When viewport width > $preview-breakpoint, the minimum width of the
* preview container is $preview-mw. The *-fit classes always have
* width: 100% and can't be used together with preview-limit.
*  
*/

@import 'globals';

$ratio-16x9-p: 9/16*100%;     // 16:9 aspect ratio multiplier.
$ratio-4x3-p: 3/4*100%;       // 4:3 aspect ratio multiplier.
$preview-mw: 600px;           // Preview min-width (vw > breakpoint).
$preview-breakpoint: 1000px;  // Preview sizing breakpoint.

.preview-cont {
	position: relative;
	width: 100%;
	margin: {
		top: $s2;
		bottom: $s2;
	}
}

.preview {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	right: 0;
	border: 1px solid $gray-1;
}

.preview-16x9-fit {
	width: 100%;
	padding-top: $ratio-16x9-p;
	.preview {
		margin-top: -1*$ratio-16x9-p;
	}
}

.preview-4x3-fit {
	width: 100%;
	padding-top: $ratio-4x3-p;
	.preview {
		margin-top: -1*$ratio-4x3-p;
	}
}

.preview-16x9 {
	padding-top: $ratio-16x9-p;
	.preview {
		margin-top: -1*$ratio-16x9-p;
	}
}

.preview-4x3 {
	padding-top: $ratio-4x3-p;
	.preview {
		margin-top: -1*$ratio-4x3-p;
	}
}

@media screen and (min-width: $preview-breakpoint) {
	.preview-16x9.preview-limit {
		padding-top: 0;
		height: 9/16*$preview-mw;
		.preview {
			margin: {
				top: 0;
				left: auto;
				right: auto;
			}
			width: $preview-mw;
			height: 9/16*$preview-mw;
		}
	}

	.preview-4x3.preview-limit {
		padding-top: 0;
		height: 3/4*$preview-mw;
		.preview {
			margin: {
				top: 0;
				left: auto;
				right: auto;
			}
			width: $preview-mw;
			height: 3/4*$preview-mw;
		}
	}
}