.logo-ticker-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.logo-ticker-wrap * {
	box-sizing: border-box;
}

.logo-ticker-horizontal {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.logo-ticker-vertical {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.logo-ticker-track {
	display: flex;
	align-items: center;
	gap: var(--lt-gap, 40px);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--lt-speed, 30s);
}

.logo-ticker-horizontal .logo-ticker-track {
	flex-direction: row;
	align-items: flex-start; /* items with wrapped text can vary in height; keep tops aligned */
	width: max-content;
	animation-name: logo-ticker-scroll-x;
}

.logo-ticker-vertical .logo-ticker-track {
	flex-direction: column;
	height: max-content;
	animation-name: logo-ticker-scroll-y;
}

/* Pause on hover is opt-in via this class, so it can be turned off per ticker */
.logo-ticker-pause-hover:hover .logo-ticker-track {
	animation-play-state: paused;
}

/* Each logo item IS the link (or a div if it has no URL) - full item is
   one click target, and text/image share the exact same column width. */
.logo-ticker-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	flex-direction: column; /* default: text below image */
}

.logo-ticker-item:hover,
.logo-ticker-item:visited,
.logo-ticker-item:active {
	text-decoration: none;
}

.logo-ticker-text-bottom .logo-ticker-item { flex-direction: column; }
.logo-ticker-text-top .logo-ticker-item    { flex-direction: column-reverse; }
.logo-ticker-text-right .logo-ticker-item  { flex-direction: row; }
.logo-ticker-text-left .logo-ticker-item   { flex-direction: row-reverse; }

.logo-ticker-horizontal .logo-ticker-item {
	flex-basis: var(--lt-item-size, auto);
	width: var(--lt-item-size, auto);
}

.logo-ticker-vertical .logo-ticker-item {
	flex-basis: var(--lt-item-size, auto);
	width: 100%;
}

/* Height/width forced with !important so theme stylesheets that reset
   "img { height:auto !important }" or similar can't make logos oversized. */
.logo-ticker-item img {
	height: var(--lt-logo-height, 60px) !important;
	width: auto !important;
	max-width: 100% !important;
	max-height: var(--lt-logo-height, 60px) !important;
	object-fit: contain;
	display: block;
	margin: 0;
	flex: 0 0 auto;
}

.logo-ticker-label {
	display: none;
	width: 100%;
	color: var(--lt-text-color, #333333);
	font-size: var(--lt-text-size, 14px);
	font-weight: var(--lt-text-weight, 600);
	line-height: 1.4;
	text-align: center;
	/* Wrap to the same fixed column width as the logo, instead of
	   overflowing sideways for long text/testimonials. */
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.logo-ticker-show-text .logo-ticker-label {
	display: block;
}

/* Colour modes */
.logo-ticker-color-grayscale .logo-ticker-item img {
	filter: grayscale(100%);
}

.logo-ticker-color-grayscale-hover .logo-ticker-item img {
	filter: grayscale(100%);
	opacity: 0.75;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.logo-ticker-color-grayscale-hover .logo-ticker-item img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

/* Divider */
.logo-ticker-divider {
	flex: 0 0 auto;
	background: var(--lt-divider-color, #dddddd);
	align-self: stretch;
}

.logo-ticker-horizontal .logo-ticker-divider {
	width: 1px;
	min-height: 20px;
}

.logo-ticker-vertical .logo-ticker-divider {
	height: 1px;
	width: 100%;
}

@keyframes logo-ticker-scroll-x {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - (var(--lt-gap, 40px) / 2))); }
}

@keyframes logo-ticker-scroll-y {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(-50% - (var(--lt-gap, 40px) / 2))); }
}

@media (prefers-reduced-motion: reduce) {
	.logo-ticker-track {
		animation: none;
	}
	.logo-ticker-horizontal .logo-ticker-track {
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Admin preview box */
.logo-ticker-preview-box {
	border: 1px solid #dcdcde;
	background: #fff;
	padding: 30px 20px;
	margin: 1rem 0 2rem;
	border-radius: 4px;
}