/// Base styles for a hero layout teaser
@mixin _oTeaserHero {
	display: flex;
	flex-flow: column nowrap;

	.o-teaser__content {
		background: oPrivateFoundationGet('o3-color-palette-wheat');
		border: 0;
		word-break: break-word;
	}
}

/// Base styles for themed hero teasers
@mixin _oTeaserHeroThemeBase {
	@include _oTeaserInverse;

	&.o-teaser--hero {
		.o-teaser__content,
		.o-teaser__image-container:after {
			border: 0;
		}

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

/// Hero opinion theme - blue background white based text
@mixin _oTeaserHeroOpinion {
	$opinion-background: oPrivateFoundationGet('o3-color-palette-oxford');
	$opinion-color: oPrivateColorsGetTextColor($opinion-background, 100);
	.o-teaser__heading a:hover,
	.o-teaser__heading a:focus,
	.o-teaser__heading a:visited,
	.o-teaser__standfirst a:visited,
	.o-teaser__byline a:hover,
	.o-teaser__byline a:focus,
	.o-teaser__tag:hover,
	.o-teaser__tag:focus {
		color: oPrivateColorsMix(
			$opinion-color,
			$opinion-background,
			$percentage: 73
		);
	}

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

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

	.o-teaser__content,
	.o-teaser__image-container:after {
		background: $opinion-background;
	}

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

/// Hero image theme styles - full size image with text overlay
@mixin _oTeaserHeroImage {
	@include oPrivateGridRespondTo($until: M) {
		@include _oTeaserHeroCentre;
		@include _oTeaserHeroCentreImage;
	}

	@include oPrivateGridRespondTo(M) {
		position: relative;

		.o-teaser__image-container {
			position: relative;
			margin-top: 0;
			padding-left: 0;
			z-index: 0;

			&:after {
				display: none;
			}
		}

		.o-teaser__content {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			min-height: 30%;
			background-color: transparent;
			background-image: linear-gradient(
				to bottom,
				rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.75),
				transparent
			);
			pointer-events: none;
		}

		.o-teaser__heading,
		.o-teaser__heading a,
		.o-teaser__heading a:visited,
		.o-teaser__byline a,
		.o-teaser__byline a:visited,
		.o-teaser__meta,
		.o-teaser__standfirst,
		.o-teaser__standfirst a,
		.o-teaser__standfirst a:visited,
		.o-teaser__timestamp {
			color: oPrivateFoundationGet('o3-color-palette-white');
			pointer-events: auto;
		}

		.o-teaser__tag-suffix {
			color: inherit;
		}

		.o-teaser__tag:hover,
		.o-teaser__tag:focus {
			color: inherit;
			outline-color: inherit;
		}
	}
}

@mixin _oTeaserHeroMidSlice {
	@include oPrivateGridRespondTo(M, $until: L) {
		.o-teaser__image-container {
			padding: 0 30%;
		}
	}
}

/// Hero teaser image container - for standard hero teasers
@mixin _oTeaserHeroImageContainer {
	.o-teaser__image-container {
		order: -1;
		width: 100%;
		padding-left: 30%;

		&:after {
			background: oPrivateFoundationGet('o3-color-palette-wheat');
			display: block;
			top: 50%;
			border: 0;
		}
	}

	.o-teaser__image {
		max-width: 100%;
	}
}

/// Centred hero teaser styles for centering content
@mixin _oTeaserHeroCentre {
	.o-teaser__content {
		text-align: center;
	}

	.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__byline {
		justify-self: center;
	}
}

/// Centred hero teaser styles to centre image
@mixin _oTeaserHeroCentreImage {
	.o-teaser__image-container {
		padding: 0 15%;
	}
}

/// Hero standalone theme styles
@mixin _oTeaserHeroStandalone {
	.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__image-container {
		padding-left: 20%;

		&:after {
			top: 25%;
			height: 75%;
		}
	}
}

// Hero Package theme — extra
@mixin _oTeaserHeroExtra {
	$hero-extra-background: oPrivateFoundationGet('o3-color-palette-slate');
	$hero-extra-color: oPrivateColorsGetTextColor($hero-extra-background, 100);
	// highlight colours
	$hero-extra-highlight-border: oPrivateFoundationGet('o3-color-palette-lemon');
	$hero-extra-highlight-color: oPrivateFoundationGet('o3-color-palette-lemon');
	.o-teaser__heading a:hover,
	.o-teaser__heading a:focus,
	.o-teaser__byline a:hover,
	.o-teaser__byline a:focus {
		color: $hero-extra-highlight-color;
	}

	.o-teaser__tag:hover,
	.o-teaser__tag:focus {
		color: oPrivateColorsMix(
			oPrivateFoundationGet('o3-color-palette-white'),
			$hero-extra-highlight-color,
			73
		);
	}

	.o-teaser__meta {
		color: $hero-extra-highlight-color;
	}

	.o-teaser__heading,
	.o-teaser__standfirst {
		color: oPrivateFoundationGet('o3-color-palette-white');
		a:visited {
			color: oPrivateColorsMix(
				$hero-extra-color,
				$hero-extra-background,
				$percentage: 50
			);
		}
	}

	.o-teaser__standfirst,
	.o-teaser__timestamp {
		color: oPrivateColorsMix(
			$hero-extra-color,
			$hero-extra-background,
			$percentage: 80
		);
	}

	.o-teaser__image-container:after,
	.o-teaser__content {
		background: $hero-extra-background;
	}

	.o-teaser__content:after {
		@include oPrivateGridRespondTo(S, L) {
			background: $hero-extra-background;
		}
	}
}