/// Inverse theme styles - base all text content on white
@mixin _oTeaserInverse {
	$inverse-background: oPrivateFoundationGet('o3-color-palette-black');
	$inverse-color: oPrivateColorsGetTextColor($inverse-background, 100);

	.o-teaser__heading a:hover,
	.o-teaser__heading a:focus,
	.o-teaser__heading a:visited,
	.o-teaser__byline a:hover,
	.o-teaser__byline a:focus,
	.o-teaser__standfirst a:visited,
	.o-teaser__tag:hover,
	.o-teaser__tag:focus {
		color: oPrivateColorsMix(
			$inverse-color,
			$inverse-background,
			$percentage: 60
		);
	}

	.o-teaser__meta,
	.o-teaser__byline,
	.o-teaser__byline a:visited,
	.o-teaser__tag-suffix,
	.o-teaser__heading {
		color: oPrivateFoundationGet('o3-color-palette-white');
	}

	.o-teaser__standfirst,
	.o-teaser__timestamp-date,
	.o-teaser__timestamp {
		color: oPrivateColorsMix(
			$inverse-color,
			$inverse-background,
			$percentage: 60
		);
	}
}

/// Make a teaser fill the full height of its container
/// (if the container is flex) and stretch the content to
/// move timestamp to teaser footer
@mixin _oTeaserStretched {
	display: flex;
	flex-grow: 1;

	.o-teaser__content {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-basis: auto;
	}
}

/// General opinion theme teaser - turns tag content blue
@mixin _oTeaserOpinion {
	.o-teaser__meta {
		color: oPrivateFoundationGet('o3-color-palette-oxford');
	}

	.o-teaser__heading {
		&:before {
			display: inline-block;
			background-color: oPrivateFoundationGet('o3-color-palette-oxford');
			mask-image:  oPrivateFoundationGet(o3-icon-quote-left);
			width: 1.1em;
			height: 1.1em;
		}
	}

	&.o-teaser--inverse,
	&.o-teaser--hero {
		.o-teaser__heading:before {
			background-color: oPrivateFoundationGet('o3-color-palette-white');
		}
	}
}

/// Opinion background theme - colours background blue and adjust text
@mixin _oTeaserOpinionBackground {
	$theme-opinion-background: oPrivateFoundationGet('o3-color-palette-sky');
	$theme-opinion-color: oPrivateColorsGetTextColor(
		$theme-opinion-background,
		100
	);
	.o-teaser__standfirst,
	.o-teaser__timestamp {
		color: oPrivateColorsMix(
			$theme-opinion-color,
			$theme-opinion-background,
			$percentage: 60
		);
	}

	&.o-teaser--large {
		.o-teaser__content,
		.o-teaser__image-container:after {
			color: $theme-opinion-color;
			background: $theme-opinion-background;
			border: 0;
		}

		.o-teaser__content:after {
			@include oPrivateGridRespondTo(S, L) {
				color: $theme-opinion-color;
				background: $theme-opinion-background;
				top: 0;
				border: 0;
			}
		}
	}
}

/// Highlight theme - colours background claret and adjust text colours
@mixin _oTeaserHighlight {
	$theme-highlight-background: oPrivateFoundationGet('o3-color-palette-claret');
	$theme-highlight-color: oPrivateColorsGetTextColor(
		$theme-highlight-background,
		100
	);
	.o-teaser__heading a:hover,
	.o-teaser__heading a:focus,
	.o-teaser__heading a:visited,
	.o-teaser__byline a:hover,
	.o-teaser__byline a:focus,
	.o-teaser__standfirst a:visited,
	.o-teaser__tag:hover,
	.o-teaser__tag:focus {
		color: oPrivateColorsMix(
			$theme-highlight-color,
			$theme-highlight-background,
			$percentage: 73
		);
	}

	.o-teaser__standfirst,
	.o-teaser__timestamp,
	.o-teaser__timestamp-prefix:before {
		color: oPrivateColorsMix(
			$theme-highlight-color,
			$theme-highlight-background,
			$percentage: 80
		);
	}

	.o-teaser__timestamp-prefix:before {
		background-color: oPrivateColorsMix(
			oPrivateFoundationGet('o3-color-palette-white'),
			$theme-highlight-background,
			80
		);
	}

	&.o-teaser--hero {
		.o-teaser__content,
		.o-teaser__image-container:after {
			color: $theme-highlight-color;
			background: $theme-highlight-background;
		}

		.o-teaser__content:after {
			@include oPrivateGridRespondTo(S, L) {
				color: $theme-highlight-color;
				background: $theme-highlight-background;
			}
		}
	}
}