/**
 * Frontend Styles for Marquee Slider Block
 */

.kilowott-marquee-slider {
	overflow: hidden;
	width: 100%;
	position: relative;
}

/* RTL support for right direction */
.kilowott-marquee-slider[dir="rtl"] {
	direction: rtl;
}

.kilowott-marquee-slider[dir="rtl"] .slick-track {
	right: 0;
	left: auto;
}

.kilowott-marquee-slider .slick-list {
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.kilowott-marquee-slider .slick-track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}

.kilowott-marquee-slider .slick-slide {
	height: auto;
	float: none; /* Important for variable width */
	outline: none !important;
}

.kilowott-marquee-slider .slick-slide > div {
	display: inline-block;
	width: auto;
	margin: 1px 0px;
}

/* Ensure proper spacing using CSS variable */
.kilowott-marquee-slider .slick-slide {
	padding-left: calc(var(--marquee-spacing, 20px) / 2);
	padding-right: calc(var(--marquee-spacing, 20px) / 2);
	box-sizing: border-box;
}

.kilowott-marquee-slider .slick-slide:first-child {
	padding-left: 0;
}

.kilowott-marquee-slider .slick-slide:last-child {
	padding-right: 0;
}