notes-box, related-box {
	display: flex;
	flex-direction: column;
	gap: 2px;

	&[hidden] {
		display: none;
	}

	&[readonly] {
		.add {
			display: none;
		}
	}

	.body {
		display: flex;
		flex-direction: column;
		padding-inline-start: 12px;
	
		.row {
			display: flex;
			gap: 4px;
			align-items: flex-start;
			
			@include comfortable {
				padding-block: 2px;
			}
	
			.box {
				@include clicky-item;
				flex: 1;
			}
	
			toolbarbutton {
				margin-inline-start: auto;
				& > image {
					visibility: hidden;
				}
			}
	
			&:is(:hover, :focus-within) toolbarbutton > image{
				visibility: visible;
			}
		}
	}
}