/// Styles used witin o-teaser-collection__heading, including size modifiers.
///
/// @example - Include all heading styles.
///		.my-collection-heading {
///			@include oTeaserCollectionContentHeading();
///		}
/// @example - Include the standard heading styles but do not style any child anchor element, and do not output modifier classes for different sized headings.
///		.my-collection-heading {
///			@include oTeaserCollectionContentHeading($opts: (
///				'anchor': false,
///				'divider': true,
///				'sizes': ()
///			));
///		}
/// @example - Output a modifier class for a "small" collection heading.
///		.my-collection-heading {
///			@include oTeaserCollectionContentHeading($opts: (
///				'anchor': true,
///				'divider': true,
///				'sizes': ('small') // .my-collection-heading--small
///			));
///		}
/// @param {Map} $opts [('anchor': true,'divider': true,'sizes': ('full-width', 'half-width', 'small'))]
@mixin oTeaserCollectionContentHeading(
	$opts: (
		'anchor': true,
		'divider': true,
		'sizes': (
			'full-width',
			'half-width',
			'small',
		),
	)
) {
	$anchor: map-get($opts, 'anchor');
	$divider: map-get($opts, 'divider');

	$sizes: map-get($opts, 'sizes');
	$full-width: index($sizes, 'full-width');
	$half-width: index($sizes, 'half-width');
	$small: index($sizes, 'small');

	font-family: oPrivateFoundationGet('o3-type-title-sm-font-family');
	font-size: oPrivateFoundationGet('o3-type-title-sm-font-size');
	font-weight: oPrivateFoundationGet('o3-type-title-sm-font-weight');
	line-height: oPrivateFoundationGet('o3-type-title-sm-line-height');

	position: relative;
	width: 100%;
	margin: 0;
	padding-top: oPrivateSpacingByName('s3');
	padding-bottom: oPrivateSpacingByIncrement(5);
	-webkit-font-smoothing: antialiased;

	@if ($divider) {
		&:before,
		&:after {
			border-top: 8px
				solid
				rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.05);
			content: '';
			left: 0;
			top: 0;
			position: absolute;
			width: 100%;
		}

		&:after {
			border-top-color: oPrivateFoundationGet('o3-color-palette-black');

			@include oPrivateGridRespondTo(L) {
				width: 32.5%;
			}
		}
	}

	@if ($divider and $full-width) {
		&--full-width:after {
			width: 100%;
		}
	}

	@if ($divider and $half-width) {
		&--half-width:after {
			@include oPrivateGridRespondTo(L) {
				width: 49%;
			}
		}
	}

	@if ($small) {
		&--small {
			margin-bottom: oPrivateSpacingByIncrement(5);
			border-bottom: 1px solid $_o-teaser-collection-color-bottom-border;

			@if ($divider) {
				&:after {
					width: 100%;
				}
			}
		}
	}

	@if ($anchor) {
		a {
			@include _oTeaserCollectionHeadingLink;
		}
	}
}

/// @access private
@mixin _oTeaserCollectionHeadingLink {
	color: inherit;
	text-decoration: none;
	border: 0;
	padding: 1px 0px 3px; // Magic numbers to make the focus style the same height for the text and > icon

	&:hover {
		color: oPrivateColorsMix('o3-color-palette-black', $percentage: 55);
	}

	&:after {
		@include oPrivateIconsContent(
			'arrow-right',
			oPrivateFoundationGet('o3-color-palette-black'),
			$size: 30
		);
		content: '';
		display: inline-block;
		position: relative;
		top: 8px;
		right: -13px;
		margin-left: -13px;
		margin-top: -10px;
	}
}

@mixin _oTeaserCollectionNumbered() {
	.o-teaser-collection__items {
		counter-reset: o-teaser-collection-items;
	}

	.o-teaser-collection__item {
		counter-increment: o-teaser-collection-items;
		padding-left: 28px;
		position: relative;

		&:before {
			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');
			content: counter(o-teaser-collection-items);
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}

@mixin _oTeaserCollectionSpecial($colour) {
	position: relative;
	border-top: 0;
	margin-bottom: 50px;
	// A pseudo element is used to break out of any container and set
	// a background colour for the full width of the page. This
	// background-color is visually superfluous, but enable automated
	// accessibility tools such as pa11y to correctly identify the
	// background colour for contrast checks.
	background-color: $colour;

	&:after {
		content: '';
		position: absolute;
		top: 0;
		z-index: -1;
		background-color: $colour;
		right: -50%;
		left: -50%;
		height: 100%;

		@supports (width: 100vw) {
			margin-left: -50vw;
			width: 100vw;
			right: auto;
			left: 50%;
		}
	}
}

@mixin _oTeaserCollectionBigStory() {
	.o-teaser-collection__heading,
	.o-teaser-collection__heading--inverse {
		z-index: 1;
		position: absolute;
		-webkit-font-smoothing: antialiased;

		@include oPrivateGridRespondTo(L) {
			width: 32.5%;
		}

		&:before {
			display: none;
		}

		&:after {
			width: 100%;
		}
	}

	.o-teaser-collection__related {
		margin: 10px 0 0;

		// Modify o-teaser: remove the related teaser borders when stacked
		.o-teaser {
			@include oPrivateGridRespondTo(M) {
				border-bottom-width: 0;
			}
			@include oPrivateGridRespondTo(L) {
				border-bottom-width: 1px;
			}
		}
	}
}