.collections-nesting-table {
	border: 1px solid #ddd;
	border-collapse: collapse;
	box-shadow: 0px 2px 21px -10px rgba(0, 0, 0, 0.2);

	--collection-nesting-level: 0;

	.collections-nesting-table-header,
	.collections-nesting-table-ungrouped-header {
		background-color: #f0f0f0;
		padding: 6px 10px;
		padding-left: 20px;

		border-bottom: 1px solid #ddd;

		font-weight: 700;
	}

	.collections-nesting-table-row-item {
		padding: 5px 10px;
		border-bottom: 1px solid #ddd;

		.row-reorder-handle {
			cursor: ns-resize;
		}

		&.row-dragging {
			opacity: 0.5;
		}

		&.row-selected {
			background-color: rgba(200, 200, 200, 0.35);

			&:hover {
				background-color: rgba(200, 200, 200, 0.3) !important;
			}
		}

		&.row-notdragging:hover {
			background-color: rgba(200, 200, 200, 0.1);
		}
	}

	.collections-nesting-table-row-item-grid {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 0.5rem;
		min-width: 0;

		> .grow {
			min-width: 0;
		}
	}

	.collections-nesting-table-row-group {
		padding: 5px 10px;
		border-bottom: 1px solid #ddd;

		background-color: #f0f0f0;
		font-weight: 600;

		.caret-icon {
			cursor: pointer;
			width: 9px;
		}

		.collection-name {
			font-size: 1.1em;
			margin-left: 5px;
			cursor: pointer;

			&:hover {
				text-decoration: underline;
			}
		}

		.btn-link {
			padding: 0 6px;
			color: #666;

			&:hover {
				color: #333;
			}
		}

		.row-reorder-handle {
			position: relative;
			cursor: ns-resize;

			margin-right: 0.25rem;
		}

		// &.row-dragging {
		// 	opacity: 0.5;
		// }

		// &.row-selected {
		// 	background-color: rgba(200, 200, 200, 0.35);

		// 	&:hover {
		// 		background-color: rgba(200, 200, 200, 0.3) !important;
		// 	}
		// }

		// &.row-notdragging:hover {
		// 	background-color: rgba(200, 200, 200, 0.1);
		// }
	}

	.collections-nesting-table-dropzone {
		padding: 5px 10px;
		p {
			border: 2px dashed #bbb;
			border-radius: 5px;
			text-align: center;
			margin: 0;
			padding: 0.75rem;
			width: 100%;
		}
	}

	.collections-nesting-table-nesting {
		padding-left: calc(var(--collection-nesting-level) * 10px) !important;
		position: relative;

		&:before {
			content: '';
			position: absolute;
			left: 0px; //calc((var(--collection-nesting-level) - 1) * 10px);
			top: -20px;
			height: calc(100% + 25px);
			width: 1px;
			background-color: #ccc;
			z-index: 1;
		}

		&:after {
			content: '';
			position: absolute;
			left: 0px; // calc((var(--collection-nesting-level) - 1) * 10px);
			top: 50%;
			width: calc(var(--collection-nesting-level) * 10px - 5px);
			height: 1px;
			background-color: #ccc;
			z-index: 1;
		}
	}
}
