$line: rgba( 255, 255, 255, 0.12 );

.custom-pattern-grid {
	align-self: center;
	flex-direction: column;
	gap: 2px;
	padding: 4px;
	background-color: rgba( 0, 0, 0, 0.28 );
	border: 1px solid $line;
	pointer-events: all;
	cursor: blank-hand;

	.pattern-grid-row {
		flex-direction: row;
		gap: 2px;
		pointer-events: none;
	}

	// Cells take no pointer events (the root owns the whole drag), so :hover can never match on them —
	// the highlight rides a class the grid sets from its own hit test instead.
	.pattern-cell {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
		background-color: rgba( 255, 255, 255, 1 );
		border: 1px solid rgba( 255, 255, 255, 0.35 );
		pointer-events: none;

		&.hovered {
			background-color: rgba( 220, 225, 230, 1 );
		}

		&.filled {
			background-color: rgba( 0, 0, 0, 1 );
			border-color: rgba( 255, 255, 255, 0.22 );
		}

		&.filled.hovered {
			background-color: rgba( 45, 45, 45, 1 );
		}
	}
}