/**
 * Range Slider widget layout.
 *
 * Structure only. Everything visual — colours, typography, the gap between
 * label and slider — comes from the widget's own controls, so nothing here
 * should ever need an !important.
 */

/* Elementor gives widgets in a container nothing but max-width: 100%, so in a
   row container a widget is a flex item sized from its own content. A range
   slider has no intrinsic width — the library absolutely positions everything
   inside a relative box — so it collapses to the width of the label and the
   value bubble. A column container hides this, because align-items: stretch
   makes the widget full width anyway.
 *
 * width and not flex-grow: in a column container grow works on the vertical
 * axis and would stretch the widget's height instead. This is a default, and
 * Elementor's own Width control under Advanced still overrides it. */
.elementor-widget-kennmal-range-slider {
	width: 100%;
}

.kennmal-range-slider {
	display: flex;
}

/* Label above: a plain column. With no label this behaves like a block, which
   is what the widget rendered before labels existed. */
.kennmal-range-slider--label-above {
	flex-direction: column;
	align-items: stretch;
}

.kennmal-range-slider--label-inline {
	flex-direction: row;
	align-items: center;
}

.kennmal-range-slider__label {
	/* A label is inline by default, which would leave a descender gap under it
	   in column layout. */
	display: block;
}

.kennmal-range-slider--label-inline .kennmal-range-slider__label {
	flex: 0 0 auto;
}

/* The slider takes whatever width is left. min-width: 0 is what stops a long
   label from squeezing it to nothing, because a flex item will not shrink
   below its content width without it. */
.kennmal-range-slider__control {
	flex: 1 1 auto;
	min-width: 0;
}

/* The library ships cursor: default on the handle, so nothing suggests it can
   be dragged. Beats the library's own rule on specificity, no !important. */
.kennmal-range-slider .irs-handle {
	cursor: grab;
}

/* :active rather than a drag class, because the library tracks dragging in a
   JS property and never puts one in the DOM. It holds up in practice: the
   handle follows the pointer, so the pointer stays over it for the whole drag.
   The disabled state needs no rule — the library lays an .irs-disable-mask
   with cursor: not-allowed over the whole slider. */
.kennmal-range-slider .irs-handle:active {
	cursor: grabbing;
}