.cc-topbar {
	--cc-topbar-speed: 55;
	--cc-topbar-font-size: 14px;
	--cc-topbar-padding: 9px;
	--cc-topbar-bg: #009942;
	--cc-topbar-color: #ffffff;
	--cc-topbar-bg-hover: #07bf54;
	--cc-topbar-color-hover: #ffffff;
	--cc-topbar-gap: clamp(1.5rem, 5vw, 3rem);
	--cc-topbar-duration: 30s;

	position: relative;
	z-index: 10;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-block: var(--cc-topbar-padding);
	background: var(--cc-topbar-bg);
	color: var(--cc-topbar-color);
	font-size: var(--cc-topbar-font-size);
	line-height: 1.35;
	transition: background-color .25s ease, color .25s ease;
}

.cc-topbar:hover,
.cc-topbar:focus-within {
	background: var(--cc-topbar-bg-hover);
	color: var(--cc-topbar-color-hover);
}

.cc-topbar--sticky {
	position: sticky;
	top: 0;
	z-index: 1001;
}

/* Temaets egen klæbende header skal lægge sig under bjælken i stedet for bag den. */
body.cc-topbar-sticky header.wp-block-template-part {
	top: var(--cc-topbar-height, 0px);
}

.cc-topbar a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.cc-topbar__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	animation: cc-topbar-rtl var(--cc-topbar-duration) linear infinite;
	will-change: transform;
}

.cc-topbar--ltr .cc-topbar__track {
	animation-name: cc-topbar-ltr;
}

.cc-topbar:hover .cc-topbar__track,
.cc-topbar:focus-within .cc-topbar__track {
	animation-play-state: paused;
}

.cc-topbar__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	padding-inline-end: var(--cc-topbar-gap);
	white-space: nowrap;
}

.cc-topbar__item::after {
	content: attr(data-sep);
	margin-inline-start: var(--cc-topbar-gap);
	opacity: .55;
}

@keyframes cc-topbar-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes cc-topbar-ltr {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.cc-topbar__track {
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
		animation: none;
	}

	.cc-topbar__item {
		white-space: normal;
		padding-inline-end: 0;
	}

	.cc-topbar__item:last-child::after {
		content: none;
	}
}