Repository: n8n-io/n8n
File: packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/parts/CanvasHandlePlus.vue (Vue)

Code before:
					stroke="light-dark(var(--color--neutral-200), var(--color--neutral-850))"
					stroke-width="2"
					rx="4"
					fill="light-dark(var(--color--neutral-200), var(--color--neutral-850))"
				/>
				<path
					stroke="currentColor"
					stroke-width="1.5"
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M8 12h8m-4-4v8"
					class="source clickable"
				/>
			</g>
		</svg>
	</div>
</template>

<style lang="scss" module>
.container {
	position: relative;

	&.bottom::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200%;
		height: 120%;
		pointer-events: auto;
		/* stylelint-disable-next-line @n8n/css-var-naming */
		transform: translate(-50%, -50%) scale(var(--canvas-zoom-compensation-factor, 1));
	}
}

.wrapper {
	position: relative;
	/* stylelint-disable-next-line @n8n/css-var-naming */
	transform: scale(var(--canvas-zoom-compensation-factor, 1));

	&.right {
		transform-origin: center left;
	}

	&.bottom {
		transform-origin: top center;
	}

	.line {
		stroke: light-dark(
			oklch(var(--canvas-handle-plus-line--color--lightness--light) 0 0),

Review comment (suggestion):
As I was doing another check over the "Files changed" rather than by commits, I noticed myself thinking for a while of what this pseudo element's purpose was again.
With the context of the commit message or the PR description, it's easy to know that this is about:
> event blocker pseudo element that prevents edge hover detection when mouse is over plus handle area

Since it has no semantic class name, I think it'd good to include an inline comment explaining the purpose of this CSS for future readers.
Maybe also explaining that this is about the plus button taking priority over the delete button.

Code after:
					stroke="light-dark(var(--color--neutral-200), var(--color--neutral-850))"
					stroke-width="2"
					rx="4"
					fill="light-dark(var(--color--neutral-200), var(--color--neutral-850))"
				/>
				<path
					stroke="currentColor"
					stroke-width="1.5"
					stroke-linecap="round"
					stroke-linejoin="round"
					d="M8 12h8m-4-4v8"
					class="source clickable"
				/>
			</g>
		</svg>
	</div>
</template>

<style lang="scss" module>
.container {
	position: relative;

	// Creates an invisible barrier around the handle from to prevent edge hover states (like the delete icon from nearby edges)
	// from coming to the forefront when the user moves their mouse over the plus button.
	// Only needed for bottom position (e.g. Ai Agent Node Output).
	&.bottom::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200%;
		height: 120%;
		pointer-events: auto;
		/* stylelint-disable-next-line @n8n/css-var-naming */
		transform: translate(-50%, -50%) scale(var(--canvas-zoom-compensation-factor, 1));
	}
}

.wrapper {
	position: relative;
	/* stylelint-disable-next-line @n8n/css-var-naming */
	transform: scale(var(--canvas-zoom-compensation-factor, 1));

	&.right {
		transform-origin: center left;
	}

	&.bottom {
		transform-origin: top center;
	}