.ntree {
	// background-color: var(--co-gray-80);

	&.is-sorting,
	&.is-sorting * {
		user-select: none;
	}
}

.ntree-box,
.ntree-header {
	display: flex;
	padding: $sp-2 0;
	gap: $sp-3;
}

.ntree-header {
	display: none;
}

.ntree-list-root {
	border-top: 1px solid var(--co-gray-70);

	.ntree-list {
		margin-left: $sp-6;
		display: none;
	}
}
.ntree-list-item {

	&.is-over > .ntree-box {
		background-color: var(--co-info-90);
	}
	&.ntree-ghost {
		opacity: 0.5 !important;
		pointer-events: none !important;
		.ntree-list {
			display: none !important;
		}
	}
}

.ntree-box {
	border-bottom: 1px solid var(--co-gray-70);
	// outline: 3px solid #f002;
	// outline-offset: -3px;

	&:first-child {
		// border-top: 1px solid var(--co-gray-70);
	}

	> div {
		align-content: center;
	}
}
.ntree-box-cell {
	&.is-handle {
		flex: 0 0 $sp-7;
		height: $sp-lg-1;
		padding-top: 4px;
		background-color: var(--co-gray-80);
		border-radius: $border-radius-3;
		cursor: grab;
		user-select: none;
		touch-action: none;
	}
	&.is-image {
		flex: 0 0 6.4rem ;
		height: 6.4rem;
	}
	&.is-toggle {
		flex: 0 0 auto;
		button {
			padding: $sp-1;
		}
	}
	&.is-title {
		flex-grow: 1;
		min-width: 0;
		overflow: hidden;
	}
	&.is-extra {
		display: none;
		min-width: 0;
	}
	&.is-actions {
		display: flex;
		flex: 0 0 auto;
		gap: $sp-2;
		align-items: center;
		justify-content: flex-end;
		width: max-content;
		.dropdown {
			display: inline-block;
		}
	}

	.ntree-list-item:not(.is-open) > .ntree-box &.is-toggle {
		.ico:last-child {
			display: none;
		}
	}
	.ntree-list-item.is-open > .ntree-box &.is-toggle {
		.ico:first-child {
			display: none;
		}
	}
}

// dropping
.ntree-fallback {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

.ntree-drop {
	position: fixed;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: flex-start;
	height: 0;
	pointer-events: none;

	&-line {
		position: absolute;
		left: 0;
		right: 0;
		height: 2px;
		background: var(--co-info);
	}

	&-tag {
		position: relative;
		z-index: 1;
		padding: .3rem .8rem;
		border-radius: .4rem;
		background: var(--co-info);
		color: #fff;
		font-size: 1.2rem;
		font-weight: 600;
		line-height: 1.2;
		white-space: nowrap;
	}
}

@include mediaQ(smMax) {
	.ntree-list-root .ntree-list {
		margin-left: $sp-4;
	}
	.ntree-box {
		gap: $sp-1;
	}
	.ntree-box-cell {
		&.is-handle {
			flex: 0 0 $sp-6;
			height: $sp-7;
		}
		&.is-image {
			flex: 0 0 ($sp-7 + $sp-4);
			height: $sp-7 + $sp-4;
			display: none;
		}
		&.is-extra {
			display: none;
		}
	}
}

@include mediaQ(sm) {
	.ntree-header {
		display: flex;
		font-size: $font-size-small;

		[data-type="extra"] {
			display: none;
		}
		[data-type="actions"] {
			display: flex;
			justify-content: flex-end;
		}
	}

	.ntree-box-cell {
		> .dropdown {
			> .btn { display: none;}
			> .dropdown-menu {
				display: flex;
				gap: $sp-2;
				position: static !important;
				transform: none !important;
				padding: 0;
				box-shadow: none;
			}
		}
	}
}