ul.tree {
	--tree-tick-size: 28px;
	--tree-tick-spacing: 6px;
	--tree-y-offset: .55em;
	--tree-x-offset: 14px;
	--tree-bg-color: white;
	--tree-line-color: #666;
	--tree-last-radius: 4px;
}

ul.tree, ul.tree ul {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0 0 0 var(--tree-x-offset);
}

ul.tree {
	margin-left: calc(var(--tree-tick-size) + var(--tree-tick-spacing) - var(--tree-x-offset));
}

ul.tree li {
	position: relative;
	margin: 0;
	padding: 0;
}

ul.tree li ul::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * (var(--tree-tick-size) + var(--tree-tick-spacing)) + 2px); /* +2: do not cover left line */
	width: var(--tree-tick-size);
	background-color: var(--tree-bg-color);
	pointer-events: none;
}

/* base for every item */
ul.tree li::before {
	pointer-events: none;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1 * (var(--tree-tick-size) + var(--tree-tick-spacing)));
	width: var(--tree-tick-size);
	background-repeat: no-repeat;
}

/* with ├── connector */
ul.tree li::before {
	background-image:
		linear-gradient(var(--tree-line-color)),
		linear-gradient(var(--tree-line-color));
	background-position:
		left top,
		left round(up, var(--tree-y-offset), 1px);
	background-size:
		1px 100%,
		100% 1px;
}

/* with └── connector */
ul.tree li:last-child::before {
	background-image:
		linear-gradient(var(--tree-line-color)),
		radial-gradient(circle at top right,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) calc(var(--tree-last-radius) - 1.2px),
			var(--tree-line-color) calc(var(--tree-last-radius) - 1px),
			var(--tree-line-color) calc(var(--tree-last-radius) - .2px),
			rgba(0, 0, 0, 0) calc(var(--tree-last-radius)),
			rgba(0, 0, 0, 0) 100%
		),
		linear-gradient(var(--tree-line-color));
	background-position:
		left top,
		left calc(round(up, var(--tree-y-offset), 1px) - var(--tree-last-radius) + 1px),
		var(--tree-last-radius) round(up, var(--tree-y-offset), 1px);
	background-size:
		1px calc(round(up, var(--tree-y-offset), 1px) - var(--tree-last-radius) + 1px),
		var(--tree-last-radius) var(--tree-last-radius),
		calc(100% - var(--tree-last-radius)) 1px;
}

/* with ├┬─ connector */
ul.tree li:has(ul)::before {
	background-image:
		linear-gradient(var(--tree-line-color)),
		linear-gradient(var(--tree-line-color)),
		linear-gradient(var(--tree-line-color));
	background-position:
		left top,
		left round(up, var(--tree-y-offset), 1px),
		var(--tree-x-offset) round(up, var(--tree-y-offset), 1px);
	background-size:
		1px 100%,
		100% 1px,
		1px calc(100% - round(up, var(--tree-y-offset), 1px));
}

/* with └┬─ connector */
ul.tree li:has(ul):last-child::before {
	background-image:
		linear-gradient(var(--tree-line-color)),
		radial-gradient(circle at top right,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0) calc(var(--tree-last-radius) - 1.2px),
			var(--tree-line-color) calc(var(--tree-last-radius) - 1px),
			var(--tree-line-color) calc(var(--tree-last-radius) - .2px),
			rgba(0, 0, 0, 0) calc(var(--tree-last-radius)),
			rgba(0, 0, 0, 0) 100%
		),
		linear-gradient(var(--tree-line-color)),
		linear-gradient(var(--tree-line-color));
	background-position:
		left top,
		left calc(round(up, var(--tree-y-offset), 1px) - var(--tree-last-radius) + 1px),
		var(--tree-last-radius) round(up, var(--tree-y-offset), 1px),
		var(--tree-x-offset) round(up, var(--tree-y-offset), 1px);
	background-size:
		1px calc(round(up, var(--tree-y-offset), 1px) - var(--tree-last-radius) + 1px),
		var(--tree-last-radius) var(--tree-last-radius),
		calc(100% - var(--tree-last-radius)) 1px,
		1px calc(100% - round(up, var(--tree-y-offset), 1px));
}