@mixin _oTopperAnchorLink {
	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);
	display: inline-block;
	width: 110px;
	padding: 5px 0 0 10px;
	margin-top: var(--o3-spacing-m);
	border-top: 1px solid var(--o3-color-use-case-link-text);
	border-left: 1px solid var(--o3-color-use-case-link-text);
	border-bottom-width: 0;
	white-space: nowrap;
	overflow: visible;

	@include oGridRespondTo(S) {
		width: 140px;
	}
	// oIcons has been removed from here but not tested as it's not possible to add
	// anchor links to toppers in Spark
	&:after {
		display: inline-block;
		content: "";
		height: var(--o3-spacing-xs);
		width: var(--o3-spacing-xs);
		background-color: var(--o3-color-palette-black);
		mask-image: var(--o3-icon-chevron-down);
		mask-repeat: no-repeat;
		mask-size: contain;
		margin: 0 6px;
		vertical-align: baseline;
	}
}

@mixin _oTopperThemePackage {
	margin-bottom: var(--o3-spacing-l);

	%_o-topper__tag,
	.o-topper__headline {
		font-family: var(--o3-type-title-md-font-family);
		font-size: var(--o3-font-size-metric2-5);
		font-weight: var(--o3-type-title-md-font-weight);
		line-height: var(--o3-font-lineheight-metric2-5);
	}

	.o-topper__headline {
		&:after {
			border-bottom-width: 1px;
		}
	}
}

@mixin _oTopperThemePackageExtra {
	.o-topper__package-sequence-id,
	&.o-topper--package .o-topper__headline {
		color: var(--o3-color-palette-lemon);
	}

	.o-topper__anchor-link {
		color: var(--o3-color-palette-lemon);
		border-color: var(--o3-color-palette-lemon);
		// oIcons has been removed as it was using v2 image service
		// but not tested as it's not possible to add anchor links to toppers in Spark
		&:after {
			display: inline-block;
			content: "";
			height: 18px;
			width: 18px;
			background-color: var(--o3-color-palette-ft-grey);
			mask-image: var(--o3-icon-chevron-down);
			mask-repeat: no-repeat;
			mask-size: contain;
			margin: 0 6px;
			vertical-align: middle;
		}

		&:hover {
			// changed from color: darken(#ffec1a, 20%);
			color: var(--o3-color-palette-matisse-blue);
		}
	}
}

@mixin _oTopperThemePackageSpecialReport {
	.o-topper__tag {
		opacity: 0.6;
	}

	.o-topper__anchor-link {
		border-color: var('o3-color-palette-white');
		color: var('o3-color-palette-white');
		// oIcons has been removed from here but not tested as it's not possible to add
		// anchor links to toppers in Spark
		&:after {
			display: inline-block;
			content: "";
			height: 18px;
			width: 18px;
			background-color: var(--o3-color-palette-ft-grey);
			mask-image: var(--o3-icon-chevron-down);
			mask-repeat: no-repeat;
			mask-size: contain;
			margin: 0 6px;
			vertical-align: middle;
		}

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