django-form-collection {
	position: relative;
	display: block;

	&.dj-marked-for-removal {
		color: gray;
		background-color: lightgray;
		background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255, 255, 255, .5) 4px, rgba(255, 255, 255, .5) 8px);
		background-size: contain;
		cursor: not-allowed;
	}

	&[sibling-position] {

		> .remove-collection {
			position: absolute;
			top: 0.5rem;
			right: 0.5rem;
			visibility: hidden;

			> svg {
				width: 1rem;
				height: 1rem;
			}
		}

		> .collection-drag-handle ~ .remove-collection {
			right: 2rem;
		}

		&:hover > .remove-collection {
			visibility: visible;
		}

		> .collection-drag-handle {
			position: relative;
			height: 1px;
			margin-bottom: -1px;

			&::after {
				content: " ";
				position: absolute;
				width: 9px;
				height: 21px;
				right: 5px;
				opacity: 0.75;
				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"%3E%3Ccircle fill="nonzero" cx="32" cy="32" r="16"/%3E%3C/svg%3E');
				background-repeat: repeat;
				background-position: 0px 0px;
				background-size: 3px 3px;
			}
		}

		&:not(.dj-marked-for-removal) > .collection-drag-handle::after {
			cursor: grab;
		}
	}

	&[sortable] > django-form-collection[sibling-position] > .collection-drag-handle:active::after {
		cursor: grabbing;
	}

	.dj-ghost-collection {
		opacity: 0.2;
	}
}

.add-collection, .remove-collection {
	> svg {
		width: 1rem;
		height: 1rem;
	}
}
