.dls-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 20px 0;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.dls-slider.dls-fade {
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.dls-slider[data-drag="0"] {
	cursor: default;
	touch-action: auto;
}

.dls-slider.is-dragging {
	cursor: grabbing;
}

.dls-slider .dls-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--dls-gap, 16px);
	width: max-content;
	margin: 0;
	padding: 0;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

/* High specificity so theme / Elementor image rules can't resize the logos. */
.dls-slider .dls-track img.dls-logo {
	display: block;
	flex: 0 0 var(--dls-w, 160px);
	width: var(--dls-w, 160px);
	min-width: var(--dls-w, 160px);
	max-width: var(--dls-w, 160px);
	height: var(--dls-h, 100px);
	min-height: var(--dls-h, 100px);
	max-height: var(--dls-h, 100px);
	object-fit: contain;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	opacity: 1;
	pointer-events: none;
	-webkit-user-drag: none;
}

@media (max-width: 767px) {
	.dls-slider .dls-track img.dls-logo {
		flex-basis: var(--dls-mw, 120px);
		width: var(--dls-mw, 120px);
		min-width: var(--dls-mw, 120px);
		max-width: var(--dls-mw, 120px);
		height: var(--dls-mh, 80px);
		min-height: var(--dls-mh, 80px);
		max-height: var(--dls-mh, 80px);
	}
}

.dls-empty {
	padding: 24px;
	border: 1px dashed currentColor;
	text-align: center;
	opacity: 0.7;
}