/* Tag Cloud Scatter Widget Styles */

.tag-cloud-scatter-widget {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Desktop: Canvas stage */
.tag-cloud-scatter-stage {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	height: 500px;
	overflow: hidden;
}

.tag-cloud-scatter-canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Accessible screen-reader-only list */
.tag-cloud-scatter-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	list-style: none;
}

/* Mobile: Marquees */
.tag-cloud-scatter-mobile {
	padding: 24px 0;
	display: none;
}

.tag-cloud-scatter-marquee-row {
	width: 100%;
	overflow: hidden;
}

.tag-cloud-scatter-marquee-track {
	display: flex;
	gap: 24px;
	width: max-content;
	will-change: transform;
}

.tag-cloud-scatter-marquee-set {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0;
}

.tag-cloud-scatter-mobile-term {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border: none;
	background: var(--sekundre);
	color: var(--text) !important;
	border-radius: 12px;
	padding: 16px 24px;
	font-size: var(--paragraph-p-lg) !important;
	line-height: var(--paragraph-p-lg-line-height) !important;
	font-weight: 700 !important;
	white-space: nowrap;
	box-shadow: 0 0 80px 0 rgba(0, 0, 0, 0.08), 0 0 33.422px 0 rgba(0, 0, 0, 0.06), 0 0 17.869px 0 rgba(0, 0, 0, 0.05), 0 0 10.017px 0 rgba(0, 0, 0, 0.04), 0 0 5.32px 0 rgba(0, 0, 0, 0.03), 0 0 2.214px 0 rgba(0, 0, 0, 0.02);
}

@media (max-width: 767px) {
	.tag-cloud-scatter-stage {
		display: none;
	}

	.tag-cloud-scatter-mobile {
		display: block;
	}

	.tag-cloud-scatter-marquee-row + .tag-cloud-scatter-marquee-row {
		margin-top: 24px;
	}

	.tag-cloud-scatter-marquee-row.row--left .tag-cloud-scatter-marquee-track {
		animation: tagCloudScatterMarqueeLeft var(--tag-cloud-scatter-marquee-duration, 60s) linear infinite;
	}

	.tag-cloud-scatter-marquee-row.row--right .tag-cloud-scatter-marquee-track {
		animation: tagCloudScatterMarqueeRight var(--tag-cloud-scatter-marquee-duration, 60s) linear infinite;
	}
}

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

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