tree.less

.tree {
	--st-label-height: 3.75rem;
	--st-subnodes-padding-left: 3rem;
	--st-collapse-icon-width: 1.5rem;
	--st-collapse-icon-height: 3.75rem;
	--st-collapse-icon-size: 0.9rem;

	display: flex;
	flex-direction: column;
	margin: 2rem 0;

	&__label {
		display: flex;
		padding: 4px;
		font-size: 1rem;
		font-weight: 480;
		cursor: move;

		&:hover {
			z-index: 2;
			--color: var(--hover-color);
			--background: var(--hover-background);
		}

		&:after {
			content: '';
			position: absolute;
			z-index: 4;
			inset: -2px 2px;
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			transition: border-color 0.2s;
			pointer-events: none;
		}

		& > span {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1rem;
			width: 100%;
			height: 100%;
			border: 2px solid;
			border-radius: 6px;
			color: var(--color);
			background-color: var(--background);
			transition: color 0.2s, background 0.2s;
		}
	}

	&__collapse > * {
		box-sizing: content-box;
		margin-left: -5px;
		padding: 5px;
		background-color: var(--background);
	}

	&__node--drop-before > &__label:after {
		border-top-color: var(--accent-color);
	}

	&__node--drop-after > &__label:after {
		border-bottom-color: var(--accent-color);
	}

	&__node--drop-inside > &__label {
		z-index: 3;
		--color: var(--accent-color);
		--background: var(--accent-background);
	}

	&__node--dragging &__label > span {
		border-style: dashed;
		cursor: move !important;
	}

	&__subnodes &__node {
		--line-color: hsl(217, 12%, 22%);
		--line-radius: 8px;
		position: relative;

		&:not(:last-child):before {
			content: '';
			position: absolute;
			height: 100%;
			left: calc((var(--st-subnodes-padding-left) / -2) + 8px);
			border-left: 2px solid var(--line-color);
		}
	}

	&__subnodes &__label > span {
		position: relative;

		&:before {
			content: '';
			position: absolute;
			left: -1.4rem;
			top: -6px;
			height: calc(100% + 6px);
			width: var(--line-radius);
			border-left: 2px solid var(--line-color);
			border-bottom-left-radius: var(--line-radius);
			mix-blend-mode: lighten;
		}

		:last-child > &:before {
			height: calc(50% + 6px);
		}

		&:after {
			content: '';
			position: absolute;
			left: -1.4rem;
			top: 0;
			width: calc(1.4rem - 4px);
			height: 50%;
			border-bottom: 2px solid var(--line-color);
			border-bottom-left-radius: var(--line-radius);
			mix-blend-mode: lighten;
		}
	}

	&__collapse {
		z-index: 3;
	}
}

.my-icon {
	margin-left: -0.32rem;
	padding: 0.2;
	font-size: 0.85rem;
	background-color: var(--background);
}

.my-tree {
	margin: 2rem 0;
}