/// Base Top story styles for all variants
@mixin _oTeaserTopStoryBase {
	.o-teaser__content {
		padding: 0 0 32px;
		border: 0;
	}

	.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');
		@include oPrivateGridRespondTo('L') {
			font-family: oPrivateFoundationGet('o3-type-headline-lg-font-family');
			font-size: oPrivateFoundationGet('o3-type-headline-lg-font-size');
			font-weight: oPrivateFoundationGet('o3-type-headline-lg-font-weight');
			line-height: oPrivateFoundationGet('o3-type-headline-lg-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');
	}
}

/// Standalone top story theme styles
@mixin _oTeaserTopStoryStandalone {
	.o-teaser__image-container {
		margin-bottom: oPrivateSpacingByName('s3');
	}
}

/// Landscape top story theme styles
@mixin _oTeaserTopStoryLandscape {
	@include oPrivateNormaliseClearfix;
	background: oPrivateFoundationGet('o3-color-palette-wheat');
	padding: 12px;

	.o-teaser__tag:hover,
	.o-teaser__tag:focus {
		color: oPrivateColorsMix(
			oPrivateFoundationGet('o3-color-palette-black'),
			oPrivateFoundationGet('o3-color-palette-wheat'),
			$percentage: 70
		);
	}

	@include oPrivateGridRespondTo(M) {
		padding: 20px 0 0 20px;

		.o-teaser__content {
			float: left;
			width: 50%;
			padding-right: 20px;
		}

		.o-teaser__image-container,
		.o-teaser__related {
			float: right;
			width: 50%;
		}

		.o-teaser__related {
			padding-right: 20px;
		}
	}
}

/// Big Story top story theme styles
@mixin _oTeaserTopStoryBigStory {
	margin-bottom: 0;
	padding: 0;
	border-bottom: 0;

	.o-teaser__image-placeholder {
		padding-bottom: 100%;
	}

	.o-teaser__content {
		padding: 60px 0 12px;
	}

	@include oPrivateGridRespondTo(M) {
		.o-teaser__content {
			float: left;
			width: 50%;
			padding: 60px 20px 12px 0;
		}

		.o-teaser__image-container {
			width: 50%;
			float: right;
		}
	}

	@include oPrivateGridRespondTo(L) {
		.o-teaser__image-container {
			margin-bottom: 0;
		}
	}
}