.Wrapper {
	list-style: none;
	box-sizing: border-box;
	padding-left: var(--spacing);
	margin-bottom: -1px;

	&.clone {
		display: inline-block;
		pointer-events: none;
		padding: 0;
		padding-left: 10px;
		padding-top: 5px;

		.TreeItem {
			--vertical-padding: 0px;

			padding-right: 24px;
			border-radius: 4px;
			box-shadow: 0px 15px 15px 0 rgba(34, 33, 81, 0.1);
		}
	}

	&.highlighted {
		.TreeItem {
			color: white;
			background-color: #4892ea;

			@media (prefers-color-scheme: dark) {
				background-color: #104789;
			}

			svg {
				fill: white;
			}
		}
	}

	&.ghost {
		&.indicator {
			opacity: 1;
			position: relative;
			z-index: 1;
			margin-bottom: -1px;

			.TreeItem {
				position: relative;
				padding: 0;
				height: 8px;
				border-color: #2389ff;
				background-color: #56a1f8;

				&:before {
					position: absolute;
					left: -8px;
					top: -4px;
					display: block;
					content: '';
					width: 12px;
					height: 12px;
					border-radius: 50%;
					border: 1px solid #2389ff;
					background-color: #ffffff;
				}

				> * {
					/* Items are hidden using height and opacity to retain focus */
					opacity: 0;
					height: 0;
				}
			}
		}

		&:not(.indicator) {
			opacity: 0.5;
		}

		.TreeItem > * {
			box-shadow: none;
			background-color: transparent;
		}
	}
}

.TreeItem {
	--vertical-padding: 0px;

	position: relative;
	display: flex;
	align-items: stretch;
	padding: var(--vertical-padding) 0px;
	background-color: #fff;
	border: 1px solid #dedede;
	color: #222;
	box-sizing: border-box;
	min-height: 38px;

	@media (prefers-color-scheme: dark) {
		background-color: #2c333a;
		border-color: #21262b;
		color: #e2e5e9;
	}

	&.isSlot > .Text {
		padding-left: 1rem;
	}
	&.isSlot > .Collapse + .Text {
		padding-left: 0.5rem;
	}
}

.Text {
	flex-grow: 1;
	padding-left: 0.5rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: flex;
	align-items: center;

	&.TextClickable {
		cursor: pointer;
		display: flex;
		align-items: center;

		&:hover {
			background-color: rgba(0, 0, 0, 0.05);

			@media (prefers-color-scheme: dark) {
				background-color: rgba(255, 255, 255, 0.05);
			}
		}
	}
}

.Count {
	position: absolute;
	top: -10px;
	right: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #2389ff;
	font-size: 0.8rem;
	font-weight: 600;
	color: #fff;
}

.disableInteraction {
	pointer-events: none;
}

.disableSelection,
.clone {
	.Text,
	.Count {
		user-select: none;
		-webkit-user-select: none;
	}
}

.Collapse {
	svg {
		transition: transform 250ms ease;
	}

	&.collapsed svg {
		transform: rotate(-90deg);
	}
}