/**
 * Pioneer stack connector — CSS ::before (same pattern as the live SEMO steps).
 *
 * Example:
 *   top: 80%; left: 170px; height: 130px; width: 30px;
 *   transform: rotate(-20deg); border-left: 4px dashed #bc2b2b;
 */

.pioneer-stack-connector {
	position: relative;
}

.pioneer-stack-connector::before {
	content: "";
	position: absolute;
	top: var(--pioneer-stack-top, 80%);
	left: var(--pioneer-stack-left, 170px);
	width: var(--pioneer-stack-box-width, 30px);
	height: var(--pioneer-stack-height, 130px);
	display: block;
	box-sizing: border-box;
	pointer-events: none;
	transform: rotate(var(--pioneer-stack-angle, 0deg));
	transform-origin: top left;
	border: 0;
	border-left: var(--pioneer-stack-line-width, 4px) var(--pioneer-stack-style, dashed)
		var(--pioneer-stack-color, #9B2335);
	z-index: var(--pioneer-stack-z, 1);
}

.editor-styles-wrapper [data-pioneer-angled],
.editor-styles-wrapper .pioneer-stack-connector,
.editor-styles-wrapper .block-editor-block-list__block.pioneer-stack-connector,
.block-editor-block-list__block.pioneer-stack-connector {
	overflow: visible !important;
	position: relative;
}