.dv-logo-slider {
	--dv-per-view: 5;
	--dv-gap: 16px;
	--dv-item-pad: 10px;
	--dv-img-max: 64px;
	--dv-holder-w: 120px;
	--dv-holder-h: 70px;
	--dv-holder-bg: transparent;
	--dv-radius: 9999px;
	--dv-border-w: 0px;
	--dv-border-color: transparent;
	--dv-duration: 20s;

	width: 100%;
}

.dv-logo-slider__viewport {
	overflow: hidden;
	width: 100%;
}

.dv-logo-slider__track {
	display: flex;
	align-items: stretch;
	gap: var(--dv-gap);
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* Each item takes a per-view column. */
.dv-logo-slider__item {
	flex: 0 0 calc((100% - (var(--dv-gap) * (var(--dv-per-view) - 1))) / var(--dv-per-view));
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--dv-item-pad);
	box-sizing: border-box;
}

.dv-logo-slider__holder {
	/* Ensure holder can grow when Logo size is larger than Holder width */
	width: max(var(--dv-holder-w), var(--dv-img-max));
	/* Same idea for height: avoid 70px default capping logo size */
	height: max(var(--dv-holder-h), var(--dv-img-max));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dv-holder-bg);
	border-radius: var(--dv-radius);
	border: var(--dv-border-w) solid var(--dv-border-color);
	box-sizing: border-box;
	overflow: hidden;
}

.dv-logo-slider__img {
	display: block;
	/* Treat --dv-img-max as "logo size" (width). Height auto, limited by holder height. */
	width: min(100%, var(--dv-img-max));
	height: auto;
	max-width: none;
	max-height: 100%;
	object-fit: contain;
}

/* Continuous mode: we expect two copies of items in the track. */
.dv-logo-slider__track--continuous {
	width: max-content;
	/* Distance is set in JS for truly seamless looping. */
	animation: dvLogoMarquee var(--dv-duration) linear infinite;
}

.dv-logo-slider[data-pause-on-hover="1"]:hover .dv-logo-slider__track--continuous {
	animation-play-state: paused;
}

@keyframes dvLogoMarquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-1 * var(--dv-marquee-distance, 0px)), 0, 0);
	}
}

/* Step mode uses JS to translate the track. */
.dv-logo-slider__track--step {
	transition: transform 450ms ease;
}

.dv-logo-slider__empty {
	padding: 16px;
	opacity: 0.75;
	font-size: 14px;
}