.tree {
	padding: 0;
	margin: 0;
	list-style: none;

	.tree {
		margin-left: 2em;
	}
}

.node {
	margin: $spacer 0;

	&:target > .node__body {
		outline: 5px auto $color-link;
		outline-offset: -2px;
	}

	&.node--self {
		.node__delegate {
			display: none;
		}

		> .node__body {
			.node__header {
				@media screen {
					background-color: $color-link;
					color: $color-bg;
				}

				@media print {
					font-weight: bold;
				}
			}
		}
	}

	&:not(.is-expanded) > .tree {
		display: none;
	}

	&.is-expanded > .node__body {
		.node__header {
			border-bottom: 1px solid $color-border;
		}
	}
}

.node__body {
	background: $color-bg;
	break-inside: avoid;
	overflow: hidden;  // border-radius
}

.node__header {
	@media screen {
		background-color: $color-bg-tint;
	}
}

.node__preview {
	opacity: 0.7;
}

.node__comment {
	padding: $padding;
	white-space: pre-wrap;
}