.annotated {
	border: 1px dashed var(--accent);
	vertical-align: top;
	display: inline-block;
	text-align: center;
	padding-left: 1px;
	padding-right: 1px;
	margin: 1px;
	cursor: pointer;
}

.annotated .annotation {
	text-align: center;
	display: none;
	background-color: transparent;
	border: 0;
	color: var(--foreground);

	&.secondary {
		font-size: 0.4em;
		color: var(--foreground-light);
	}
}



.annotated.is-active:not(.is-in-place, .is-in-place-only) > *:not([class]) {
	color: var(--foreground-light);
}

.annotated.is-active.is-in-place-only > *:not([class]) {
	font-weight: bold; 
}

.annotated.is-active:not(.is-in-place-only) .annotation {
	display: block;
}

.annotated.is-active.is-in-place .annotation {
	display: block;
	color: var(--foreground-light);
}

p {
	margin-bottom: 1 rem;
}




.line {
	margin-bottom: 0.8em;
	
	&.selected .line-number {
		background-color: green;
	}

	& > blocks {

	}
}

.line.highlighted {
	background-color: yellow;
}

.line > span {
	vertical-align: top;
	
}

.line-number {
	font-family: monospace;
	margin-right: 0.4rem;
	color: var(--foreground-light);
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	
}

.line-icon {
	cursor: pointer;
	margin-left: 0.4rem;
	font-size: 1.5rem;
}

.content-block-container {
	display: inline-block;
}

.content-block {
	display: inline-block;
}




.list > li.is-section-head {
	display: flex;
	column-gap: 0.2em;
	align-items: center;
	font-weight: 400;
}

.list > li .block {
	display: block;
	width: 1.2em;
	height: 1.2em;
	border: 0.1em solid var(--accent);
}

.list > li .block.is-filled {
	background-color: var(--accent);
}