// This mixin has been created to replace oPrivateTypographyList
// during the migration from Origami
@mixin _oTypographyList($type: null) {
	// Undo browser defaults.
	margin: 0 0 var(--o3-spacing-s);
	padding: 0;
	list-style: none;

	// Reset number counter for new ordered list.
	@if ($type == 'ordered') {
		counter-reset: item;
	}
	> li {
		position: relative;
		// Undo browser default.
		margin: 0;
		// Allow space for 2-3 numbers for both ordered and unordered lists,
		// so content aligns between both list types.
		padding-left: calc(2ch + var(--o3-spacing-5xs));

		&:before {
			display: inline-block;
			position: absolute;
			left: 0;
			transform-origin: center left;

			@if ($type == 'unordered') {
				content: '\2022'; // dot character
				color: inherit;
				// 28px marker given a parent font-size of 18px
				transform: scale(#{div(28, 18)});
				// magic number to center marker
				margin-top: #{div(28, 18) * -0.16ch};
			}

			@if ($type == 'ordered') {
				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);
				content: counter(item);
				counter-increment: item;
				font-feature-settings: 'tnum';
				// 16px marker given a parent font-size of 18px
				transform: scale(#{div(16, 18)});
				// magic number to make marker flush to the left
				margin-left: #{div(16, 18) * -0.16ch};
			}
		}
	}
}
// This mixin has been created to replace oPrivateTypographyLink
// during the migration from Origami
@mixin _oTypographyLink() {
	$underline-size: 0.25ex; // 2px for 18px MetricWeb

	&[target='_blank'] {
		// Visually hidden content is positioned absolutely. Position relative on the anchor means the hidden
		// content is positioned relative to the anchor element. This ensures it is clipped by the overflow
		// property of an ancestor; otherwise the pseudo element which contains the hidden content will not
		// be clipped by the overflow of any ancestor between it and its containing block.
		// https://drafts.csswg.org/css2/#visufx
		position: relative;

		&:after {
			position: absolute;
			clip: rect(0 0 0 0);
			clip-path: polygon(0 0, 0 0);
			margin: -1px;
			border: 0;
			overflow: hidden;
			padding: 0;
			width: 2px;
			height: 2px;
			white-space: nowrap;
			content: '(opens a new window)';
		}
	}
	// Output base styles shared by all links.
	text-decoration: none;
	cursor: pointer;
	border-bottom: $underline-size solid;

	@supports (text-decoration-thickness: $underline-size) {
		border-bottom: 0;
		text-decoration-thickness: $underline-size; //sass-lint:disable-line no-misspelled-properties
		text-decoration-line: underline;
	}
	color: var(--o3-color-use-case-link-text);
	text-decoration-color: var(--o3-color-use-case-link-underline);

	&:hover {
		color: var(--o3-color-use-case-link-text-hover);
		text-decoration-color: var(--o3-color-use-case-link-underline-hover);
	}

	&:focus {
		color: var(--o3-color-use-case-link-text-hover);
		text-decoration-color: transparent;
	}
}

@mixin _oTopperThemeElements($themes) {
	@if index($themes, 'opinion') {
		.o-topper__opinion-genre {
			@include _oTopperOpinionGenre;
		}
	}

	.o-topper__headshot {
		@include _oTopperHeadshot;
	}

	.o-topper__headshot-image {
		@include _oTopperHeadshotImage;
	}

	.o-topper__anchor-link {
		@include _oTopperAnchorLink;
	}
}

@mixin _oTopperThemes($themes, $colors) {
	@include _oTopperThemeElements($themes);

	@if index($themes, 'basic') {
		.o-topper--basic {
			@include _oTopperBasic;
			@if index($themes, 'right-rail') {
				&.o-topper--right-rail {
					@include _oTopperGridRightRail;
				}
			}
		}
	}

	@if index($themes, 'branded') {
		.o-topper--branded {
			@include _oTopperThemeBranded;
			@if index($themes, 'right-rail') {
				&.o-topper--right-rail {
					@include _oTopperGridRightRail;
				}
			}
		}
	}

	@if index($themes, 'opinion') {
		.o-topper--opinion {
			@include _oTopperThemeOpinion;
			@if index($themes, 'right-rail') {
				&.o-topper--right-rail {
					@include _oTopperGridRightRail;
				}
			}
		}
	}

	@if index($themes, 'has-headshot') {
		.o-topper--has-headshot {
			@include _oTopperHasHeadshot;
		}
	}

	@if index($themes, 'full-bleed-offset') {
		.o-topper--full-bleed-offset {
			@include _oTopperThemeFullBleedOffset;
			@if index($themes, 'right-rail') {
				&.o-topper--right-rail {
					@include _oTopperFullBleedGridRightRail;
				}
			}
		}
	}

	@if index($themes, 'split-text-left') or index($themes, 'split-text-center') {
		.o-topper--split-text-left,
		.o-topper--split-text-center {
			@include _oTopperThemeSplitText;
		}
	}

	@if index($themes, 'full-bleed-image-center') or
		index($themes, 'full-bleed-image-left')
	{
		.o-topper--full-bleed-image-center,
		.o-topper--full-bleed-image-left {
			@include _oTopperThemeFullBleedImage;
		}
	}

	@if index($themes, 'package') {
		.o-topper--package {
			@include _oTopperThemePackage;
		}
	}

	@if index($themes, 'package-extra') or index($themes, 'package-extra-wide') {
		.o-topper--package-extra,
		.o-topper--package-extra-wide {
			@include _oTopperThemePackageExtra;
		}
	}

	@if index($themes, 'package-special-report') {
		.o-topper--package-special-report {
			@include _oTopperThemePackageSpecialReport;
		}
	}

	// @deprecated - remove in the next major version,
	// decided not to warm here as users outputting all
	// o-topper themes which includes the news-package
	// by default should not be bothered. This is no longer
	// in use on ft.com / app already:
	// https://financialtimes.atlassian.net/browse/CI-944
	@if index($themes, 'news-package') {
		@error 'The news package topper theme no longer exists. Please speak to Origami if your project depends on this.';
	}

	@if index($themes, 'centered') {
		.o-topper--centered {
			@include _oTopperCentered;
		}
	}

	@if index($themes, 'deep-portrait') {
		.o-topper--deep-portrait {
			@include _oTopperThemeSplitTextPortraitLeft($colors);
		}
	}

	@if index($themes, 'deep-landscape') {
		.o-topper--deep-landscape {
			@include _oTopperThemeDeepLandscape($colors);
		}
	}
}

@mixin _oTopperElements($elements) {
	@if index($elements, 'content') {
		.o-topper__content {
			@include _oTopperContent;
		}
	}

	@if index($elements, 'visual') {
		.o-topper__visual {
			@include _oTopperVisual;
		}
	}

	@if index($elements, 'visual') or index($elements, 'background') {
		.o-topper__visual,
		.o-topper__background {
			@include _oTopperBackground;
		}
	}

	@if index($elements, 'headline') {
		.o-topper__headline {
			margin: 0;
			margin-bottom: var(--o3-spacing-xs);
			font-family: var(--o3-type-headline-md-font-family);
			font-size: var(--o3-type-headline-md-font-size);
			font-weight: var(--o3-type-headline-md-font-weight);
			line-height: var(--o3-type-headline-md-line-height);

			@include oGridRespondTo('L') {
				font-family: var(--o3-type-headline-lg-font-family);
				font-size: var(--o3-type-headline-lg-font-size);
				font-weight: var(--o3-type-headline-lg-font-weight);
				line-height: var(--o3-type-headline-lg-line-height);
			}
		}

		.o-topper__headline--large {
			position: relative; //so it appears above the full width background
			margin-bottom: var(--o3-spacing-2xs);
			font-family: var(--o3-type-display-sm-font-family);
			font-size: var(--o3-type-display-sm-font-size);
			font-weight: var(--o3-type-display-sm-font-weight);
			line-height: var(--o3-type-display-sm-line-height);

			@include oGridRespondTo('S') {
				font-family: var(--o3-type-display-md-font-family);
				font-size: var(--o3-type-display-md-font-size);
				font-weight: var(--o3-type-display-md-font-weight);
				line-height: var(--o3-type-display-md-line-height);
			}

			@include oGridRespondTo('L') {
				font-family: var(--o3-type-display-lg-font-family);
				font-size: var(--o3-type-display-lg-font-size);
				font-weight: var(--o3-type-display-lg-font-weight);
				line-height: var(--o3-type-display-lg-line-height);
			}

			&:after {
				content: '';
				display: block;
				// 18px Metric = 4px
				// 48px FinancierDisplayWeb = 8px
				border-bottom: calc(0.34ex + 1px) solid;
				// 18px Metric = ~60px
				// 48px FinancierDisplayWeb = ~180px
				width: calc(7ch - 10px);
				max-width: 100%;
				// 20px assuming a 48px font size
				padding-top: 0.416em;
			}
		}
	}

	@if index($elements, 'summary') {
		.o-topper__summary {
			@include _oTopperSummary;
		}
	}

	@if index($elements, 'standfirst') {
		.o-topper__standfirst {
			@include _oTopperStandfirst;
		}
	}

	@if index($elements, 'summary--body') {
		.o-topper__summary--body {
			@include _oTopperSummaryBody;
		}
	}

	@if index($elements, 'tags') {
		.o-topper__tags {
			@include _oTopperTags;
		}
	}

	@if index($elements, 'columnist') {
		.o-topper__columnist {
			margin-top: var(--o3-spacing-2xs);
			text-transform: uppercase;
		}

		.o-topper--has-headshot .o-topper__columnist {
			margin-right: $_o-topper-headshot-width;
			@include oGridRespondTo(M) {
				margin-right: $_o-topper-headshot-width-M;
			}
		}
	}

	@if index($elements, 'columnist-list') {
		.o-topper__columnist-list {
			@extend %_o-topper__tag;
			display: contents;
			list-style: none;
			li {
				display: inline-block;
			}
		}
	}

	@if index($elements, 'columnist-name') {
		.o-topper__columnist-name {
			@extend %_o-topper__tag;
			vertical-align: middle;
		}
	}

	@if index($elements, 'brand') {
		.o-topper__brand {
			@include _oTopperBrand;
		}
	}

	@if index($elements, 'topic') {
		.o-topper__topic {
			@include _oTopperTopic;
		}
	}

	@if index($elements, 'read-next') {
		.o-topper__right-rail-content {
			@include _oTopperRightHandContent;
		}
	}

	@if index($elements, 'image') {
		.o-topper__image {
			@include _oTopperImage;
		}
	}

	@if index($elements, 'image-credit') {
		.o-topper__image-credit {
			@include _oTopperImageCredit;
		}
	}

	@if index($elements, 'image-caption') {
		.o-topper__image-caption {
			@include _oTopperImageCaption;
		}
	}
}

@mixin _oTopperAlignText($position) {
	$mleft: (
		'left': 0,
		'center': auto,
		'right': auto,
	);
	$mright: (
		'left': auto,
		'center': auto,
		'right': 0,
	);
	$value: (
		'left': flex-start,
		'center': center,
		'right': flex-end,
	);

	.o-topper__headline--large {
		&:after {
			margin-left: map-get($mleft, #{$position});
			margin-right: map-get($mright, #{$position});
		}
	}

	.o-topper__content {
		text-align: $position;
		align-self: map-get($value, #{$position});
	}

	.o-topper__tags {
		justify-content: map-get($value, #{$position});
	}
}

@mixin _oTopperDefineOnce($label) {
	@if not map-has-key($_o-topper-defined, $label) {
		@content;
		$_o-topper-defined: map-merge(
			$_o-topper-defined,
			(
				$label: true,
			)
		) !global;
	}
}