/* ============================================================
   ID Ticker Widget
   ============================================================ */

.id-ticker {
	overflow: hidden;
	width: 100%;
	position: relative;
}

/* Flex track that holds the two cloned lists side-by-side */
.id-ticker__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

/* Each list is also a flex row */
.id-ticker__list {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

/* Individual item */
.id-ticker__item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
}

/* Linked items: inherit colour, no underline */
a.id-ticker__item {
	color: inherit;
	text-decoration: none;
}

/* Stacked layout: icon above text */
.id-ticker__item--stacked {
	flex-direction: column;
	text-align: center;
}

/* Inline layout: honour icon position via order */
.id-ticker__item--inline.id-ticker__item--icon-after .id-ticker__icon {
	order: 1;
}
.id-ticker__item--inline.id-ticker__item--icon-after .id-ticker__text {
	order: 0;
}

/* Icon resets */
.id-ticker__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.id-ticker__icon svg {
	display: block;
}

/* ── Keyframe animations ──────────────────────────────────── */

@keyframes id-ticker-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes id-ticker-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Applied by JS (inline style + class) so each widget is independent */
.id-ticker--running .id-ticker__track {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.id-ticker--dir-left.id-ticker--running .id-ticker__track {
	animation-name: id-ticker-scroll-left;
}

.id-ticker--dir-right.id-ticker--running .id-ticker__track {
	animation-name: id-ticker-scroll-right;
}

/* Pause when hovering (JS toggles paused state, CSS also handles it) */
.id-ticker--paused .id-ticker__track,
.id-ticker[data-pause-on-hover="true"]:hover .id-ticker__track {
	animation-play-state: paused;
}