.sortable-ghost {
	opacity: .3;
}

.sortable-chosen {
	background: #F7F9FF;
}

.sortable-drop-child,
.sortable-drop-root {
	cursor: grabbing;
}

.sortable-chosen,
.sortable-drag,
.sortable-fallback,
.sortable-chosen *,
.sortable-drag *,
.sortable-fallback * {
	user-select: none !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
}

.drag-handle {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	touch-action: none;
}

/*
 * Ячейка используется как полотно дерева.
 *
 * В background JS передаёт:
 * - продолжающиеся линии предков;
 * - линию от текущего родителя к его детям.
 */
.hierarchical-sortable-row > td:first-child {
	position: relative;
	background:
		var(--sortable-tree-background, none);
}

/*
 * Содержимое ячейки должно находиться поверх линий.
 */
.hierarchical-sortable-row > td:first-child > * {
	position: relative;
	z-index: 2;
}

/*
 * Соединение текущего дочернего элемента с родителем:
 *
 * │
 * ├── элемент
 */
.hierarchical-sortable-child > td:first-child::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;

	left: var(--sortable-branch-x, 6px);

	width: var(--sortable-branch-width, 16px);

	pointer-events: none;

	background:
		linear-gradient(
			#D7DFEC,
			#D7DFEC
		)
		0 0 /
		1px var(--sortable-branch-height, 100%)
		no-repeat,

		linear-gradient(
			#D7DFEC,
			#D7DFEC
		)
		0 var(--sortable-title-y, 29px) /
		100% 1px
		no-repeat;
}