.list-item-wrapper {
	box-sizing: border-box;
	height: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	// The top-level folder has depth 2, so we need to subtract for the item
	// to have the correct padding
	--absolute-depth: calc(var(--depth) - 2);
	padding-left: calc(var(--joplin-main-padding) + (var(--absolute-depth) * 16px));
	background: none;
	transition: 0.1s;

	// Show the toggle button first, even if it's markup is included later for a better screen reader
	// experience.
	> .toggle {
		order: -1;
	}

	&.-selected {
		background: var(--joplin-selected-color2);
	}

	// When multiple items are selected, show an outline (similar to the focus outline) to indicate
	// which folder has the primary selection.
	&.-selected-primary {
		--outline-color: var(--joplin-focus-outline-color-dimmed);
		outline: 1px solid var(--outline-color);

		// Also adjust the background color: This makes it clearer which item has primary focus,
		// especially when using a dimmed outline.
		background-color: color-mix(
			in srgb,
			var(--outline-color) 12%,
			var(--joplin-selected-color2) 92%
		);

		// For accessibility, use a different style when actually focused. This makes it easier to
		// tell where the keyboard focus is.
		&:focus {
			--outline-color: var(--joplin-focus-outline-color);
		}
	}

	// Don't highlight selected items on hover -- doing so makes it
	// difficult to tell whether the hovered item is selected or not.
	&.-highlight-on-hover:not(.-selected):hover {
		background-color: var(--joplin-background-color-hover2);
	}
}