/*
 * DS Ticker
 * Style it from your child theme with these custom properties, on :root,
 * on a row class, or on a specific ticker (.dsm-ticker--{slug}):
 *
 *   --dsm-ticker-bg          background            (default: transparent)
 *   --dsm-ticker-color       text color            (default: inherit)
 *   --dsm-ticker-link        link color            (default: inherit)
 *   --dsm-ticker-sep-color   separator color       (default: inherit)
 *   --dsm-ticker-font-size   font size             (default: inherit)
 *   --dsm-ticker-padding     vertical padding      (default: .75em 0)
 *   --dsm-ticker-gap         space between lines   (default: 2em)
 */

.dsm-ticker {
	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	padding: var(--dsm-ticker-padding, .75em 0);
	background: var(--dsm-ticker-bg, transparent);
	color: var(--dsm-ticker-color, inherit);
	font-size: var(--dsm-ticker-font-size, inherit);
	line-height: 1.4;
}

.dsm-ticker__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.dsm-ticker .dsm-ticker__list {
	display: flex;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dsm-ticker .dsm-ticker__item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0 var(--dsm-ticker-gap, 2em) 0 0;
	white-space: nowrap;
}

.dsm-ticker .dsm-ticker__item::before,
.dsm-ticker .dsm-ticker__item::after {
	content: none;
}

.dsm-ticker__sep {
	margin-left: var(--dsm-ticker-gap, 2em);
	color: var(--dsm-ticker-sep-color, inherit);
}

.dsm-ticker a {
	color: var(--dsm-ticker-link, inherit);
}

/* Animation (class is added by ticker.js once the loop is prepared). */
.dsm-ticker.is-running .dsm-ticker__track {
	animation: dsm-ticker-scroll var(--dsm-ticker-duration, 30s) linear infinite;
}

.dsm-ticker--right.is-running .dsm-ticker__track {
	animation-direction: reverse;
}

.dsm-ticker--pause:hover .dsm-ticker__track,
.dsm-ticker--pause:focus-within .dsm-ticker__track {
	animation-play-state: paused;
}

@keyframes dsm-ticker-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Break out of a boxed container. Prefer a stretched WPBakery row when possible. */
.dsm-ticker--fullwidth {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Respect "reduce motion": static line the visitor can scroll sideways. */
@media (prefers-reduced-motion: reduce) {
	.dsm-ticker {
		overflow-x: auto;
	}

	.dsm-ticker .dsm-ticker__track {
		animation: none !important;
	}
}