/**
 * Simó Lorenzo Kit — Separador.
 *
 * La línea es un <line> SVG. Todos los valores llegan como variables CSS desde
 * los controles de Elementor; las clases slk-sep--style-* y slk-sep--cap-*
 * (prefix_class) están en el contenedor del widget.
 */

.slk-sep {
	--slk-sep-width: 100%;
	--slk-sep-ml: 0;
	--slk-sep-mr: auto;
	--slk-sep-color: rgba(0, 0, 0, 0.15);
	--slk-sep-thickness: 4px;
	--slk-sep-dash: 20px;
	--slk-sep-gap: 14px;
	--slk-sep-space: 16px;

	/* Ajuste de extremos redondeados (se activa más abajo): el remate redondo
	   sobresale medio grosor por cada lado de la raya. */
	--slk-sep-cap: butt;
	--slk-sep-adj: 0px;

	width: var(--slk-sep-width);
	max-width: 100%;
	margin-left: var(--slk-sep-ml);
	margin-right: var(--slk-sep-mr);
	padding-block: var(--slk-sep-space);
	line-height: 0;
}

.slk-sep__svg {
	display: block;
	width: 100%;
	height: var(--slk-sep-thickness);
	overflow: hidden;
}

/*
 * Rayas: "largo visible" y "hueco visible" son exactamente los del panel. Con
 * extremos redondeados se resta el grosor al trazo y se suma al hueco (los
 * remates lo compensan), y se desplaza medio grosor para que la primera raya
 * empiece justo en el borde izquierdo.
 */
.slk-sep__line {
	stroke: var(--slk-sep-color);
	stroke-width: var(--slk-sep-thickness);
	stroke-linecap: var(--slk-sep-cap);
	stroke-dasharray: max(0px, calc(var(--slk-sep-dash) - var(--slk-sep-adj))) calc(var(--slk-sep-gap) + var(--slk-sep-adj));
	stroke-dashoffset: calc(var(--slk-sep-adj) / -2);
}

/* Extremos redondeados (rayas o continua). */
.slk-sep--cap-round .slk-sep {
	--slk-sep-cap: round;
	--slk-sep-adj: var(--slk-sep-thickness);
}

/* Puntos: siempre redondos, tan anchos como el grosor. */
.slk-sep--style-dotted .slk-sep {
	--slk-sep-cap: round;
	--slk-sep-adj: var(--slk-sep-thickness);
	--slk-sep-dash: var(--slk-sep-thickness);
}

/* Continua: sin discontinuidad ni desplazamiento. */
.slk-sep--style-solid .slk-sep__line {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
}

/* Continua con extremos redondeados: se redondean las puntas recortando el SVG. */
.slk-sep--style-solid.slk-sep--cap-round .slk-sep__svg {
	border-radius: var(--slk-sep-thickness);
}