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

	> p {
		margin: 0;
	}
}

@mixin _oTopperSummary {
	font-family: var(--o3-type-body-base-font-family);
	font-size: var(--o3-type-body-base-font-size);
	font-weight: var(--o3-type-body-base-font-weight);
	line-height: var(--o3-type-body-base-line-height);
	> ul {
		padding: 0 var(--o3-spacing-xs);
	}

	> ul > li {
		margin: var(--o3-spacing-4xs) 0;
	}
}

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

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

		li:first-child {
			margin-top: 0px;
		}
		li {
			font-family: var(--o3-type-body-base-font-family);
			font-size: var(--o3-type-body-base-font-size);
			font-weight: var(--o3-type-body-base-font-weight);
			line-height: var(--o3-type-body-base-line-height);
			margin-top: var(--o3-spacing-4xs);
			margin-bottom: 0;
		}
	}
}

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

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

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

// Legacy IE9 support.
// TODO: Review for deletion — confirm no regression before removing
@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: var(--o3-type-body-highlight-font-family);
		font-size: var(--o3-type-body-highlight-font-size);
		font-weight: var(--o3-type-body-highlight-font-weight);
		line-height: var(--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: var(--o3-color-palette-claret);

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

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

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

@mixin _oTopperTags {
	font-family: var(--o3-type-body-base-font-family);
	font-size: var(--o3-type-body-base-font-size);
	font-weight: var(--o3-type-body-base-font-weight);
	line-height: var(--o3-type-body-base-line-height);
	padding-bottom: 5px;
}

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