@mixin _oTopperStandfirst {
	color: oPrivateFoundationGet('o3-color-use-case-body-text');
	font-family: oPrivateFoundationGet('o3-type-body-lg-font-family');
	font-weight: oPrivateFoundationGet('o3-type-body-lg-font-weight');
	font-size: oPrivateFoundationGet('o3-type-body-lg-font-size');
	line-height: oPrivateFoundationGet('o3-type-body-lg-line-height');

	opacity: 0.8;

	> p {
		margin: 0;
	}
}

@mixin _oTopperSummary {
	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');
	> ul {
		padding: 0 oPrivateSpacingByIncrement(5);
	}

	> ul > li {
		margin: oPrivateSpacingByName('s2') 0;
	}
}

@mixin _oTopperSummaryBody {
	h2 {
		font-family: oPrivateFoundationGet('o3-type-body-highlight-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
		font-weight: oPrivateFoundationGet('o3-type-body-highlight-font-weight');
		line-height: oPrivateFoundationGet('o3-type-body-highlight-line-height');
		margin: 5px 0 0;
	}

	ul {
		@include oPrivateTypographyList('unordered');
		margin: 0px;

		li:first-child {
			margin-top: 0px;
		}
		li {
			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');
			margin-top: oPrivateSpacingByName('s2');
			margin-bottom: 0;
		}
	}
}

@mixin _oTopperImageCredit {
	font-family: oPrivateFoundationGet('o3-type-detail-font-family');
	font-size: oPrivateFoundationGet('o3-type-detail-font-size');
	font-weight: oPrivateFoundationGet('o3-type-detail-font-weight');
	line-height: oPrivateFoundationGet('o3-type-detail-line-height');

	color: oPrivateFoundationGet('o3-color-palette-white');
	position: absolute;
	text-shadow: 1px 1px 1px oPrivateFoundationGet('o3-color-palette-slate');
	text-align: right;
	width: 100vw;
	margin-left: 50%;
	left: -50vw;
	box-sizing: border-box;
	padding: 5px 10px;
	transform: translate(0, -100%);
}

@mixin _oTopperImageCaption {
	font-family: oPrivateFoundationGet('o3-type-detail-font-family');
	font-size: oPrivateFoundationGet('o3-type-detail-font-size');
	font-weight: oPrivateFoundationGet('o3-type-detail-font-weight');
	line-height: oPrivateFoundationGet('o3-type-detail-line-height');
	padding: 10px 11px 0px;
	@include oPrivateGridRespondTo(L) {
		padding-left: 18px;
	}
}

//IE9 support
@mixin _oTopperImage {
	display: block;
	position: relative;
	width: 100%;

	@supports (object-fit: cover) {
		height: 100%;
		object-fit: cover;
	}
}

@include _oTopperDefineOnce(tag) {
	%_o-topper__tag {
		color: unset;

		font-family: oPrivateFoundationGet('o3-type-body-highlight-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
		font-weight: oPrivateFoundationGet('o3-type-body-highlight-font-weight');
		line-height: oPrivateFoundationGet('o3-type-body-highlight-line-height');

		// Apply tag link styles only to anchor elements.
		// e.g. `a.my-author-tag:hover`
		// Tags which are links are highlighted with colour by default.
		// But author tags are the same colour as body copy until hover.
		$tag-link-selector: selector-unify('a', '#{&}');
		@at-root #{$tag-link-selector} {
			color: oPrivateFoundationGet('o3-color-palette-claret');

			text-decoration: none;
			border-bottom: 0;

			&:hover {
				color: oPrivateFoundationGet('o3-color-palette-claret-30');
			}
		}
	}
}

@mixin _oTopperBrand {
	@extend %_o-topper__tag;
	margin-right: 4px;
}

@mixin _oTopperTags {
	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');
	padding-bottom: 5px;
}

@mixin _oTopperTopic {
	@extend %_o-topper__tag;
}