.demo-bar {
	--demo-bar-bg: var(--color-text-strong);
	--demo-bar-text: color-mix(in srgb, var(--color-white) 82%, transparent);
	--demo-bar-link: var(--color-highlight);
	padding: var(--space-2) var(--gutter);
	background: var(--demo-bar-bg);
	text-align: center;
}

.demo-bar__text {
	color: var(--demo-bar-text);
	font-size: var(--fs-small);
	line-height: var(--leading-normal);
}

.demo-bar__link {
	color: var(--demo-bar-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.demo-bar__link:hover {
		color: var(--color-white);
	}
}