item-pane-header {
	&:not([hidden]) {
		display: flex;
	}
	flex-direction: column;
	align-items: stretch;
	padding: 8px;
	border-bottom: 1px solid var(--fill-quinary);
	
	min-height: 41px;
	max-height: 25%;
	overflow-y: auto;
	scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-background);

	.head-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		@include compact {
			gap: 4px;
		}

		@include comfortable {
			gap: 8px;
		}

		.title-head {
			align-self: stretch;

			.title {
				margin-top: calc(0px - var(--editable-text-padding-block));
				flex: 1 1 0;
				font-weight: 600;
				line-height: 1.333;
				
				editable-text {
					flex: 1;
				}
			}
			
			.creator-year {
				color: var(--fill-secondary);
			}
			
			.bib-entry {
				line-height: 1.5;
				
				&.loading {
					color: var(--fill-secondary);
				}
			}
			
			.creator-year, .bib-entry {
				// Set padding to match editable-text in tight mode, plus 1px for border
				padding-inline: calc(var(--editable-text-tight-padding-inline) + 1px);
				overflow-wrap: anywhere;
			}
		}
	}

	&.no-title-head {
		min-height: auto;
		&:not(.has-custom-head) {
			padding: 0;
			border: none;
		}

		.title-head {
			display: none;
		}
	}

	@include elements-custom-head;
	.custom-head {
		padding: 0;
		border: none;
		height: 24px;
	}

	&.batch-edit {
		background: var(--accent-blue10);

		&.has-custom-head .custom-head {
			background: transparent;
			// Match the 4px icon-title gap of the collapsible sections below
			gap: 4px;

			.batch-edit-head-icon {
				width: 16px;
				height: 16px;
				@include svgicon("edit", "universal", "16");
				fill: var(--accent-blue);
			}

			description {
				flex: 1;
				font-weight: 600;
				line-height: 1.333;
				margin: 0;
			}

			button {
				flex-grow: 0;
				height: 24px;
				min-width: 0;
				padding-inline: 12px;
			}
		}
	}
}