/**
 * News Element — News Ticker block (from news-element's ticker, on
 * Splide AutoScroll). Structure only; height, colours, spacing and type
 * come from the block's controls.
 */

.ne-ticker {
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

/* Label with a slanted right edge in its own colour. */
.ne-ticker-label {
	z-index: 2;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
}

.ne-ticker-label::after {
	content: '';
	position: absolute;
	top: 0;
	right: -12px;
	width: 24px;
	height: 100%;
	background: inherit;
	transform: skewX(-18deg);
}

.ne-ticker-label > * {
	position: relative;
	z-index: 1;
}

.ne-ticker-dot {
	border-radius: 50%;
	background: currentColor;
	animation: ne-ticker-pulse 1.5s infinite;
}

/* Marquee: Splide sizes slides to their content (autoWidth). */
.ne-ticker-window {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 18px;
}

.ne-ticker-window .splide__track,
.ne-ticker-window .splide__list {
	height: 100%;
}

.ne-ticker-window .splide__slide {
	display: flex;
	align-items: center;
}

/* Dot between items. */
.ne-ticker-window .splide__slide::after {
	content: '';
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

/* Scoped under .ne-ticker so theme link / button styles don't win. */
.ne-ticker .ne-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s ease;
}

.ne-ticker .ne-ticker-btn {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	align-self: center;
	width: 34px;
	height: 34px;
	margin: 0 6px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.ne-ticker-btn svg {
	fill: currentColor;
}

/* Before Splide mounts (editor preview, no JavaScript): one clipped line. */
.ne-ticker-window:not(.is-initialized) .splide__list {
	display: flex;
	overflow: hidden;
}

@keyframes ne-ticker-pulse {
	0% {
		box-shadow: 0 0 0 0 currentColor;
	}

	70% {
		box-shadow: 0 0 0 8px transparent;
	}

	100% {
		box-shadow: 0 0 0 0 transparent;
	}
}

@media (max-width: 700px) {
	.ne-ticker .ne-ticker-btn {
		display: none;
	}
}

@media (max-width: 667px) {
	.ne-ticker-text {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ne-ticker-dot {
		animation: none;
	}

	.ne-ticker .ne-ticker-item,
	.ne-ticker .ne-ticker-btn {
		transition: none;
	}
}

/* The scrolling window takes the space left after the label and never grows
   past its column, so a ticker inside a narrow sidebar or column does not push
   the page sideways. */
.ne-ticker-window {
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}