/**
 * JMeks slider styles.
 *
 * Colours are reactive by default: dots and Next/Back use the section's text
 * colour. Override only when a section needs something else, by setting the
 * custom properties on the slider container (global class or site CSS):
 *   --jmeks-dot-size, --jmeks-dot-gap, --jmeks-dot-color,
 *   --jmeks-dot-active-color, --jmeks-dot-radius, --jmeks-nav-color,
 *   --jmeks-nav-gap, --jmeks-strip-gap
 * --jmeks-peek and --jmeks-gap are set by the runtime from the panel.
 */

.jmeks-slider-active {
	display: block !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

.jmeks-slider-active > .jmeks-slider {
	width: 100%;
	overflow: hidden;
}

.jmeks-slider-active > .jmeks-slider > .swiper-wrapper {
	align-items: stretch;
}

/*
 * Held down with a mouse: the closed hand straight away. Swiper writes its own
 * grab cursor inline on the wrapper, hence the !important.
 */
.jmeks-slider.is-grabbing > .swiper-wrapper {
	cursor: grabbing !important;
}

.jmeks-slider-active > .jmeks-slider .swiper-slide {
	box-sizing: border-box;
	width: calc( 100% - var( --jmeks-peek, 40px ) );
	height: auto;
	display: flex;
	flex-direction: column;
}

.jmeks-slider-active > .jmeks-slider .swiper-slide > * {
	flex: 1 1 auto;
	max-width: 100%;
}

.jmeks-slider__before,
.jmeks-slider__after {
	display: flex;
	flex-direction: column;
	gap: var( --jmeks-strip-gap, 16px );
}

.jmeks-slider__before {
	margin-bottom: var( --jmeks-strip-gap, 16px );
}

.jmeks-slider__after {
	margin-top: var( --jmeks-strip-gap, 16px );
}

.jmeks-hidden {
	display: none !important;
}

/* Editor-only helpers that make no sense while the slider is active. */
.jmeks-slider-active > [data-grid-outline],
.jmeks-slider-active > .elementor-empty-view,
.jmeks-slider-active > .elementor-sortable-placeholder {
	display: none !important;
}

/*
 * Swiper adds .swiper-pagination-bullets to the dots container, and Elementor
 * Pro's carousel stylesheet paints that class white. Re-inherit the colour with
 * a more specific selector so currentColor stays the section's text colour.
 */
.jmeks-slider-active > .jmeks-slider > .jmeks-slider__dots {
	display: flex;
	justify-content: flex-end;
	gap: var( --jmeks-dot-gap, 6px );
	padding-top: 12px;
	position: static;
	width: auto;
	color: inherit;
	cursor: auto;
}

/*
 * Dots and nav follow the section's text colour (currentColor), so a dark
 * panel with white text gets white dots with nothing configured. The inactive
 * dot is the same colour at reduced strength; the rgba line is a fallback for
 * browsers without color-mix().
 */
.jmeks-slider__dot {
	width: var( --jmeks-dot-size, 8px );
	height: var( --jmeks-dot-size, 8px );
	border-radius: var( --jmeks-dot-radius, 0 );
	background: var( --jmeks-dot-color, rgba( 128, 128, 128, 0.45 ) );
	background: var( --jmeks-dot-color, color-mix( in srgb, currentColor 35%, transparent ) );
	cursor: pointer;
	transition: background 0.2s ease;
}

.jmeks-slider__dot.is-active {
	background: var( --jmeks-dot-active-color, currentColor );
}

.jmeks-slider__nav {
	display: flex;
	justify-content: flex-end;
	gap: var( --jmeks-nav-gap, 24px );
	padding-top: 8px;
}

.jmeks-slider__prev,
.jmeks-slider__next {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: var( --jmeks-nav-color, currentColor );
	cursor: pointer;
}

.jmeks-slider__prev.is-disabled,
.jmeks-slider__next.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}