$tickertape-bg-colors: (
	'primary': $primary,
	'secondary': $secondary,
	'tertiary': $tertiary,
	'white': white,
);

.tickertape {
	position: relative;
	--background: #{$primary};
	--color: white;
	margin-bottom: $spacing-lg;
	margin-right: $spacing-md;
	text-wrap: balance;

	+ .tickertape {
		margin-top: -$spacing-md;
	}

	&__highlight {
		position: relative;
		display: inline;
		left: 0.35rem;
		padding: 0.1rem;
		line-height: 1.55; // just enough to show 1px between lines at 1rem+
		background: $primary;
		background: var(--background, #{$primary});
		color: var(--color, white);
		box-shadow: -0.35rem 0 0 0 var(--background, #{$primary}), 0.35rem 0 0 0 var(--background, #{$primary});
		box-decoration-break: clone;
		border-radius: $border-radius-sm;
		//border-top: 0.25rem solid transparent;
		//border-bottom: 0.25rem solid transparent;

		a {
			color: white;
			color: var(--color);
		}

		&:where(h1) {
			line-height: 1.45;
		}
	}
}


@each $name, $value in $tickertape-bg-colors {
	.tickertape--bg-#{$name} {
		--background: #{$value};
		--color: #{choose-contrast-color-prefer-white($value)};
	}
}