annotation-items-pane {
	display: flex;
	flex-direction: column;
	
	@include elements-custom-head;

	// Make sure the summary containing name of top-level item is always visible
	// and titles are cut off by letter and not by word
	collapsible-section > .head .title-box .summary {
		opacity: 1 !important;
		width: 0;
		white-space: wrap;
  		word-break: break-all;
		display: inline;
	}

	// Annotation icon for collapsible section
	collapsible-section > .head .title::before {
		content: '';
		width: 16px;
		height: 16px;
		background: icon-url("itempane/16/attachment-annotations.svg") no-repeat center;
		-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
		fill: var(--tag-purple);
		stroke: var(--tag-purple);
	}

	collapsible-section > .body {
		display: flex;
		flex-direction: column;
		gap: 4px;
		@include comfortable {
			gap: 8px;
		}
	}

	collapsible-section:not(:last-child) {
		border-bottom: 1px solid var(--fill-quinary);
	}

	// Do not cut off annotation text and comment
	annotation-row .body .comment,
	annotation-row .body .quote {
		-webkit-line-clamp: inherit !important;
	}
}