/// Small teaser styles
@mixin _oTeaserSmall {
	display: flex;
	padding-bottom: oPrivateSpacingByName('s3');
	border-bottom: 1px solid oPrivateFoundationGet('o3-color-palette-black-20');

	.o-teaser__content {
		// IE needs a unit to apply flex-basis correctly 😐
		flex: 1 0 0%;
		order: 2;
	}

	.o-teaser__image-container {
		width: 30%;
		// because flex items are allowed to shrink implicitly
		flex-shrink: 0;
		padding-right: oPrivateGridGutter(M);

		@include oPrivateGridRespondTo($until: M) {
			// Mobile screens only
			display: none;
		}
	}

	&.o-teaser--post {
		@include _oTeaserPost;
	}

	&.o-teaser--post.o-teaser--opinion {
		@include _oTeaserPostOpinion;
	}
}

/// Small teaser styles for a stacked image
/// image will appear 100% width at the top of the teaser
@mixin _oTeaserSmallStacked {
	flex-direction: column;

	.o-teaser__content {
		flex-basis: auto; // must override original .o-teaser__content flex-basis
	}

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

	.o-teaser__image-container {
		margin-bottom: oPrivateSpacingByName('s3');
		width: 100%;
		min-height: 1px;
		padding-top: 0;
		padding-right: 0;
	}
}

@mixin _oTeaserSmallImagePositionRight {
	&.o-teaser--has-image .o-teaser__image-container {
		order: 2;
		padding-left: oPrivateGridGutter(M);
		padding-right: inherit;
	}
}

@mixin _oTeaserPost {
	border-bottom: 0;
	.o-teaser__meta {
		margin-bottom: oPrivateSpacingByName('s2');
	}
	.o-teaser__tag-prefix {
		font-family: oPrivateFoundationGet('o3-type-detail-font-family');
		font-size: oPrivateFoundationGet('o3-type-detail-font-size');
		font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
		line-height: oPrivateFoundationGet('o3-type-detail-line-height');
		color: oPrivateFoundationGet('o3-color-palette-claret-60');
		margin-right: oPrivateSpacingByName('s1');
	}
	.o-teaser__tag {
		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');
		color: oPrivateFoundationGet('o3-color-palette-claret-60');
	}
	.o-teaser__standfirst {
		display: none;
	}
	.o-teaser__image-placeholder {
		width: 100%;
		height: auto;
		padding: 0;
		display: flex;
		img {
			width: 100%;
		}
	}
	.o-teaser__timestamp {
		display: none;
	}
	.o-teaser__content {
		background: oPrivateFoundationGet('o3-color-palette-wheat');
		padding: oPrivateSpacingByName('s3');
		box-sizing: border-box;
		a {
			text-decoration: none;
		}
	}
	.o-teaser__image-container {
		a {
			width: 100%;
		}

		background: oPrivateFoundationGet('o3-color-palette-wheat');
		display: flex;
		flex: 1 0 50%;
		width: 100%;
		padding: 0;
	}
	.o-teaser__content {
		flex: 1 0 50%;
	}

	.o-teaser__heading,
	.o-teaser__heading a {
		font-family: oPrivateFoundationGet('o3-type-headline-sm-font-family');
		font-size: oPrivateFoundationGet('o3-type-headline-sm-font-size');
		font-weight: oPrivateFoundationGet('o3-type-headline-sm-font-weight');
		line-height: oPrivateFoundationGet('o3-type-headline-sm-line-height');
		color: oPrivateFoundationGet('o3-color-palette-black');
	}

	@include oPrivateGridRespondTo($until: S) {
		flex-direction: column;
		.o-teaser__image-container {
			display: block;
			width: 100%;
			padding: 0;
		}
	}
}

@mixin _oTeaserPostOpinion {
	@include _oTeaserPost;

	.o-teaser__tag {
		color: oPrivateFoundationGet('o3-color-palette-oxford');
	}
	.o-teaser__tag-prefix {
		color: oPrivateFoundationGet('o3-color-palette-oxford');
	}

	@include oPrivateGridRespondTo($until: S) {
		flex-direction: column;
		.o-teaser__image-container {
			display: block;
			width: 100%;
			padding: 0;
		}
	}
}