/* The promotion bar at the very top of the page. The background comes from
   the .ds-sc-bg-N class printed with it, this only lays the text out. */

.ds-promotion-bar {
	position: relative;
	z-index: 10;
	width: 100%;
	font-family: var(--main-font);
	color: var(--color-6);
	text-align: center;
}

/* The text with the arrow on its right, centered together. */
.ds-promotion-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: var(--el-padding-250) 1rem;
}

.ds-promotion-bar__link {
	color: inherit;
	text-decoration: none;
}

.ds-promotion-bar__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* The max-width is the text width set on the Promotion tab, printed on the bar
   as a custom property only when it is set, so with none the text runs as
   wide as the bar. Tablet and mobile below fall back to the desktop width. */
.ds-promotion-bar__text {
	margin: 0;
	max-width: var(--ds-promotion-bar-text-width, none);
	font-size: var(--button-300);
	font-weight: 500;
}

.ds-promotion-bar__text strong,
.ds-promotion-bar__text b {
	font-weight: 700;
}

.ds-promotion-bar__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: auto;
}

@media ( max-width: 1024px ) {
	.ds-promotion-bar__text {
		max-width: var(--ds-promotion-bar-text-width-tablet, var(--ds-promotion-bar-text-width, none));
	}
}

/* On mobile the text starts at the left edge and the arrow sits at the right
   edge, however short the text is or however narrow its width. */
@media ( max-width: 767px ) {
	.ds-promotion-bar__inner {
		justify-content: flex-start;
	}

	.ds-promotion-bar__text {
		max-width: var(--ds-promotion-bar-text-width-mobile, var(--ds-promotion-bar-text-width, none));
		text-align: left;
	}

	.ds-promotion-bar__icon {
		margin-left: auto;
	}
}