/// Styles for large teasers.
/// Also form the basis of styles for hero teasers
@mixin _oTeaserLarge {
	@include oPrivateNormaliseClearfix;

	.o-teaser__content {
		padding: oPrivateGridGutter(M);
		border: 1px solid oPrivateFoundationGet('o3-color-palette-black-20');
	}

	.o-teaser__heading {
		font-family: oPrivateFoundationGet('o3-type-headline-md-font-family');
		font-size: oPrivateFoundationGet('o3-type-headline-md-font-size');
		font-weight: oPrivateFoundationGet('o3-type-headline-md-font-weight');
		line-height: oPrivateFoundationGet('o3-type-headline-md-line-height');
	}

	.o-teaser__standfirst {
		font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
		font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
		line-height: oPrivateFoundationGet('o3-type-body-base-line-height');

		@include oPrivateGridRespondTo('L') {
			font-family: oPrivateFoundationGet('o3-type-body-lg-font-family');
			font-size: oPrivateFoundationGet('o3-type-body-lg-font-size');
			font-weight: oPrivateFoundationGet('o3-type-body-lg-font-weight');
			line-height: oPrivateFoundationGet('o3-type-body-lg-line-height');
		}
		margin-top: oPrivateSpacingByName('s6');
	}
}

/// Adjusts large teasers to work with images.
/// Appears in portrait at default-medium, landscape
/// in medium-large, and portrait from large up
@mixin _oTeaserLargeWithImage {
	.o-teaser__content {
		@include oPrivateGridRespondTo($until: S) {
			border-bottom: 0;
		}

		@include oPrivateGridRespondTo(S, L) {
			position: relative;
			float: left;
			border-right: 0;

			&:after {
				content: '';
				position: absolute;
				top: 1px;
				right: -25%;
				height: 100%;
				width: 25%;
				display: block;
				border: 1px solid oPrivateFoundationGet('o3-color-palette-black-20');
				border-left: 0;
			}
		}

		@include oPrivateGridRespondTo(S, M) {
			width: 60%;
		}

		@include oPrivateGridRespondTo(M, L) {
			width: 70%;
		}

		@include oPrivateGridRespondTo(L) {
			border-bottom: 0;
		}
	}
}

/// Image container styles for large image
/// at various breakpoints
@mixin _oTeaserImageContainer {
	.o-teaser__image {
		position: relative;
		z-index: 1;

		@include oPrivateGridRespondTo(M, L) {
			max-width: 220px;
		}
	}

	.o-teaser__image-container {
		position: relative;
		float: none;
		width: 100%;
		margin-top: -1px;
		padding-left: 25%;

		&:after {
			position: absolute;
			top: 0;
			left: 0;
			content: '';
			display: block;
			width: 100%;
			height: 50%;
			border-left: 1px solid oPrivateFoundationGet('o3-color-palette-black-20');
			border-bottom: 1px solid
				oPrivateFoundationGet('o3-color-palette-black-20');
		}

		@include oPrivateGridRespondTo(S, L) {
			float: right;
			margin-top: 0;
			padding-left: 0;

			&:after {
				display: none;
			}
		}

		@include oPrivateGridRespondTo(S, M) {
			width: 40%;
		}

		@include oPrivateGridRespondTo(M, L) {
			width: 30%;
		}
	}
}

/// Forces a large teaser to always appear in the portrait
/// style, regardless of breakpoint
@mixin _oTeaserLargeImagePortrait {
	.o-teaser__content {
		border-bottom: 0;
	}

	.o-teaser__image {
		position: relative;
		z-index: 1;
	}

	.o-teaser__image-container {
		position: relative;
		float: none;
		width: 100%;
		margin-top: -1px;
		padding-left: 25%;

		&:after {
			position: absolute;
			top: 0;
			left: 0;
			content: '';
			display: block;
			width: 100%;
			height: 50%;
			border-left: 1px solid oPrivateFoundationGet('o3-color-palette-black-20');
			border-bottom: 1px solid
				oPrivateFoundationGet('o3-color-palette-black-20');
		}
	}
}

/// Forces a large teaser to always appear in the landscape
/// style, regardless of breakpoint
@mixin _oTeaserLargeImageLandscape {
	.o-teaser__content {
		position: relative;
		float: left;
		width: 60%;
		border-right: 0;

		&:after {
			content: '';
			position: absolute;
			top: 1px;
			right: -25%;
			height: 100%;
			width: 25%;
			display: block;
			border: 1px solid oPrivateFoundationGet('o3-color-palette-black-20');
			border-left: 0;
		}
	}

	.o-teaser__image {
		position: relative;
		max-width: 220px;
		z-index: 1;
	}

	.o-teaser__image-container {
		position: relative;
		float: right;
		width: 40%;
		margin-top: 0;
		padding-left: 0;

		&:after {
			display: none;
		}
	}
}