// Space Control Icon.
export const SpacingControlIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none">
		<path
			fill="#2F2F2F"
			d="M8.4 16.7h.7l-1.6 3.5.9.4 3.9-8.5H15v-1.5h-2l1.3-2.8h1.3c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.9 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2H15l1.4-3.2-.9-.4-5.7 12.5H8.4c-2 0-3.7-1.7-3.7-3.7s1.7-3.7 3.7-3.7H10V6.3H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.4 5.2 5.2 5.2Z"
		/>
	</svg>
);
// Space Control Icon.
export const SpacingControlActiveIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none">
		<path
			fill="#fff"
			d="M8.4 16.8H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7s1.7-3.7 3.7-3.7H10V6.4H8.4c-2.8 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2Zm10.9-5.2c0 2-1.7 3.7-3.7 3.7H14v1.5h1.6c2.9 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7Zm-4.6-.9H9.4v1.5h5.3v-1.5Z"
		/>
	</svg>
);

export const VerticalAxisSpaceIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<rect x={1.9728} width={7.88999} height={1.47941} fill="#1E1E1E" />
		<rect x={1.9728} y={10.5205} width={7.88999} height={1.47941} fill="#1E1E1E" />
		<rect
			x={0.000301361}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 0.000301361 9.8623)"
			fill="#DDDDDD"
		/>
		<rect
			x={10.5203}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 10.5203 9.8623)"
			fill="#DDDDDD"
		/>
	</svg>
);
export const HorizontalAxisSpaceIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<rect x={1.9728} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect x={1.9728} y={10.5205} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect
			x={0.000301361}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 0.000301361 9.8623)"
			fill="#1E1E1E"
		/>
		<rect
			x={10.5203}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 10.5203 9.8623)"
			fill="#1E1E1E"
		/>
	</svg>
);

export const TopSpaceIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<rect x={1.9728} width={7.88999} height={1.47941} fill="#1E1E1E" />
		<rect x={1.9728} y={10.5205} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect
			x={0.000301361}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 0.000301361 9.8623)"
			fill="#DDDDDD"
		/>
		<rect
			x={10.5203}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 10.5203 9.8623)"
			fill="#DDDDDD"
		/>
	</svg>
);
export const RightSpaceIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<rect x={1.9728} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect x={1.9728} y={10.5205} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect
			x={0.000301361}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 0.000301361 9.8623)"
			fill="#DDDDDD"
		/>
		<rect
			x={10.5203}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 10.5203 9.8623)"
			fill="#1E1E1E"
		/>
	</svg>
);
export const BottomSpaceIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<rect x={1.9728} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect x={1.9728} y={10.5205} width={7.88999} height={1.47941} fill="#1E1E1E" />
		<rect
			x={0.000301361}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 0.000301361 9.8623)"
			fill="#DDDDDD"
		/>
		<rect
			x={10.5203}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 10.5203 9.8623)"
			fill="#DDDDDD"
		/>
	</svg>
);
export const LeftSpaceIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<rect x={1.9728} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect x={1.9728} y={10.5205} width={7.88999} height={1.47941} fill="#DDDDDD" />
		<rect
			x={0.000301361}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 0.000301361 9.8623)"
			fill="#1E1E1E"
		/>
		<rect
			x={10.5203}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 10.5203 9.8623)"
			fill="#DDDDDD"
		/>
	</svg>
);

export const LinkedIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<rect x={1.97281} width={7.88999} height={1.47941} fill="#1E1E1E" />
		<rect x={1.97281} y={10.5205} width={7.88999} height={1.47941} fill="#1E1E1E" />
		<rect
			x={0.000305176}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 0.000305176 9.8623)"
			fill="#1E1E1E"
		/>
		<rect
			x={10.5203}
			y={9.8623}
			width={7.88999}
			height={1.47941}
			transform="rotate(-90 10.5203 9.8623)"
			fill="#1E1E1E"
		/>
	</svg>
);

export const RadiusAllIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<g clipPath="url(#clip0_20765_7718)">
			<path
				d="M6.75 0V1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V5.25H12V2C12 0.89543 11.1046 0 10 0H6.75ZM0 5.25H1.5V2.5C1.5 1.94772 1.94772 1.5 2.5 1.5H5.25V0H2C0.89543 0 0 0.895431 0 2V5.25ZM10.5 9.5C10.5 10.0523 10.0523 10.5 9.5 10.5H6.75V12H10C11.1046 12 12 11.1046 12 10V6.75H10.5V9.5ZM1.5 6.75H0V10C0 11.1046 0.895431 12 2 12H5.25V10.5H2.5C1.94772 10.5 1.5 10.0523 1.5 9.5V6.75Z"
				fill="#1D1B1A"
			/>
		</g>
		<defs>
			<clipPath id="clip0_20765_7718">
				<rect width={12} height={12} fill="white" />
			</clipPath>
		</defs>
	</svg>
);
export const RadiusTopLeftIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<g clipPath="url(#clip0_20765_7169)">
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M1.5 5.25H0V2C0 0.895431 0.89543 0 2 0H5.25V1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V5.25Z"
				fill="#1D1B1A"
			/>
			<path
				d="M6.75 0V1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V5.25H12V2C12 0.89543 11.1046 0 10 0H6.75Z"
				fill="#DDDDDD"
			/>
			<path
				d="M10.5 9.5C10.5 10.0523 10.0523 10.5 9.5 10.5H6.75V12H10C11.1046 12 12 11.1046 12 10V9.375V6.75H10.5V9.5Z"
				fill="#DDDDDD"
			/>
			<path
				d="M1.5 6.75H0V10C0 11.1046 0.895431 12 2 12H5.25V10.5H2.5C1.94772 10.5 1.5 10.0523 1.5 9.5V6.75Z"
				fill="#DDDDDD"
			/>
		</g>
		<defs>
			<clipPath id="clip0_20765_7169">
				<rect width={12} height={12} fill="white" />
			</clipPath>
		</defs>
	</svg>
);
export const RadiusTopRightIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<g clipPath="url(#clip0_20778_4979)">
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M1.5 5.25H0V2C0 0.895431 0.89543 0 2 0H5.25V1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V5.25ZM6.75 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V6.75H12V10C12 11.1046 11.1046 12 10 12H6.75V10.5ZM0 6.75H1.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5H5.25V12H2C0.895431 12 0 11.1046 0 10V6.75Z"
				fill="#DDDDDD"
			/>
			<path
				d="M6.75 0V1.5H9.5C10.0523 1.5 10.5 1.94772 10.5 2.5V5.25H12V2C12 0.89543 11.1046 0 10 0H6.75Z"
				fill="#1D1B1A"
			/>
		</g>
		<defs>
			<clipPath id="clip0_20778_4979">
				<rect width={12} height={12} fill="white" />
			</clipPath>
		</defs>
	</svg>
);
export const RadiusBottomRightIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<g clipPath="url(#clip0_20778_1478)">
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M6.75 1.5V0H10C11.1046 0 12 0.89543 12 2V5.25H10.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H6.75ZM1.5 5.25H0V2C0 0.895431 0.89543 0 2 0H5.25V1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V5.25ZM0 6.75H1.5V9.5C1.5 10.0523 1.94772 10.5 2.5 10.5H5.25V12H2C0.895431 12 0 11.1046 0 10V6.75Z"
				fill="#DDDDDD"
			/>
			<path
				d="M10.5 9.5C10.5 10.0523 10.0523 10.5 9.5 10.5H6.75V12H10C11.1046 12 12 11.1046 12 10V6.75H10.5V9.5Z"
				fill="#1D1B1A"
			/>
		</g>
		<defs>
			<clipPath id="clip0_20778_1478">
				<rect width={12} height={12} fill="white" />
			</clipPath>
		</defs>
	</svg>
);
export const RadiusBottomLeftIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 12 12" fill="none">
		<g clipPath="url(#clip0_20778_9300)">
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M6.75 1.5V0H10C11.1046 0 12 0.89543 12 2V5.25H10.5V2.5C10.5 1.94772 10.0523 1.5 9.5 1.5H6.75ZM1.5 5.25H0V2C0 0.895431 0.89543 0 2 0H5.25V1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V5.25ZM6.75 10.5H9.5C10.0523 10.5 10.5 10.0523 10.5 9.5V6.75H12V10C12 11.1046 11.1046 12 10 12H6.75V10.5Z"
				fill="#DDDDDD"
			/>
			<path
				d="M1.5 6.75H0V10C0 11.1046 0.895431 12 2 12H5.25V10.5H2.5C1.94772 10.5 1.5 10.0523 1.5 9.5V6.75Z"
				fill="#1D1B1A"
			/>
		</g>
		<defs>
			<clipPath id="clip0_20778_9300">
				<rect width={12} height={12} fill="white" />
			</clipPath>
		</defs>
	</svg>
);

export const GapHorizontalIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={14} height={12} viewBox="0 0 14 12" fill="none">
		<path d="M5 5.2002H9V6.7002H5V5.2002Z" fill="#1E1E1E" />
		<path d="M11 6L8.375 8.16506V3.83494L11 6Z" fill="#1E1E1E" />
		<path d="M3 6L5.625 3.83494L5.625 8.16506L3 6Z" fill="#1E1E1E" />
		<rect x={0.750076} y={12} width={12} height={1.5} transform="rotate(-90 0.750076 12)" fill="#1E1E1E" />
		<rect x={11.7499} y={12} width={12} height={1.5} transform="rotate(-90 11.7499 12)" fill="#1E1E1E" />
	</svg>
);
export const GapVerticalIcon = () => (
	<svg xmlns="http://www.w3.org/2000/svg" width={12} height={13} viewBox="0 0 12 13" fill="none">
		<path d="M5.19998 8.25L5.19998 4.25L6.69998 4.25L6.69998 8.25L5.19998 8.25Z" fill="#1E1E1E" />
		<path d="M5.99998 2.25L8.16504 4.875L3.83492 4.875L5.99998 2.25Z" fill="#1E1E1E" />
		<path d="M5.99998 10.25L3.83492 7.625L8.16504 7.625L5.99998 10.25Z" fill="#1E1E1E" />
		<rect x={11.9999} y={12.5} width={12} height={1.5} transform="rotate(180 11.9999 12.5)" fill="#1E1E1E" />
		<rect x={11.9999} y={1.5} width={12} height={1.5} transform="rotate(180 11.9999 1.5)" fill="#1E1E1E" />
	</svg>
);
