.root {
	padding: var(--spacing-regular);
	border: 1px solid transparent;
	color: var(--color-text-primary);
	font-family: var(--font-family);
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	align-items: center;
	justify-content: flex-start;
	min-height: calc(var(--grid-base) * 5.5);
	display: flex;
}

.root:hover {
	color: var(--list-item-hover-color);
	background: var(--list-hover-active-background);
}

.root.active {
	border: 1px solid var(--color-highlight-border);
	transition: none;
	background: var(--list-item-active-background);
	color: var(--list-item-active-color);
}

.selected {
	background: var(--list-item-selected-background);
	color: var(--list-item-selected-color);
}

.disabled {
	color: var(--list-item-disabled-color);
	background: var(--list-item-disabled-background);
	font-style: italic;
}

.root.movedUp {
	padding-bottom: calc(var(--grid-base) * 6.5);
}

.root.movedDown {
	padding-top: calc(var(--grid-base) * 6.5);
}

.root.collapsed {
	border-width: 0;
	height: 0;
	min-height: 0;
	overflow: hidden;
	padding-bottom: 0;
	padding-top: 0;
}

.dragIcon {
	cursor: move;
	opacity: 0.5;
	position: absolute;
	right: var(--grid-base);
}

.primary {
	flex-grow: 1;
}

.leading {
	margin-right: var(--grid-base);
}

.trailing {
	margin-left: var(--grid-base);
}
