.note-list {
	width: 100%;
	height: 100%;
	background-color: var(--joplin-background-color3);
	border-right: 1px solid var(--joplin-divider-color);
	overflow-x: hidden;
	overflow-y: scroll;

	> .notes {
		display: flex;
		overflow-x: hidden;
	}

	> .emptylist {
		padding: 16px;
		font-size: var(--joplin-font-size);
		color: var(--joplin-color);
		background-color: var(--joplin-background-color);
		font-family: var(--joplin-font-family);
	}

	// focus-visible is communicated by displaying the active item in a different style.
	// As such, an outline is unnecessary.
	&:focus-visible {
		outline: unset;
	}
}

.note-list-item {
 	display: flex;
}

.note-list-item-wrapper {
	border-color: var(--joplin-color);
	position: relative;
	box-sizing: border-box;

	> .dragcursor {
		background-color: var(--joplin-color);
		position: absolute;
		z-index: 1000;
		width: 2px;
		height: 2px;
	}

	&:focus-visible {
		outline: none;
	}
}

.note-list-item-wrapper.-provisional {
	opacity: 0.5;
}

.note-title-tooltip {
	position: fixed;
	display: none;
	z-index: 10000;
	max-width: 480px;
	padding: 6px 10px;
	background-color: var(--joplin-background-color2);
	color: var(--joplin-color2);
	border: 1px solid var(--joplin-divider-color);
	border-radius: 8px;
	font-family: var(--joplin-font-family);
	font-size: var(--joplin-font-size);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	pointer-events: none;
	white-space: normal;
	overflow-wrap: break-word;
}