client/components/mma/switch/complete/SwitchSignInImage.tsx

import { css } from '@emotion/react';
import { from } from '@guardian/source/foundations';

export const SwitchSignInImage = () => (
	<>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 130 144"
			focusable="false"
			aria-hidden="true"
			css={css`
				display: block;
				${from.tablet} {
					display: none;
				}
			`}
		>
			<g clipPath="url(#sign-in-mobile-a)">
				<g clipPath="url(#sign-in-mobile-b)">
					<mask
						id="sign-in-mobile-c"
						width="182"
						height="146"
						x="0"
						y="-1"
						maskUnits="userSpaceOnUse"
						style={{ maskType: 'alpha' }}
					>
						<path
							fill="#D9D9D9"
							stroke="#000"
							d="M114.071 0 1.4922 143.476l180.0008.451L181.202 0h-67.131Z"
						/>
					</mask>
					<g mask="url(#sign-in-mobile-c)">
						<path
							fill="url(#sign-in-mobile-d)"
							d="M-151.656-.3618h281.575V143.927h-281.575V-.3618Z"
						/>
					</g>
					<path
						fill="#66ADD3"
						d="M61.3281 24.6161c0-2.7511 2.2302-4.9813 4.9813-4.9813H186.11c2.751 0 4.981 2.2302 4.981 4.9813v84.9319c0 2.751-2.23 4.981-4.981 4.981H66.3094c-2.7511 0-4.9813-2.23-4.9813-4.981V24.6161Z"
					/>
					<path
						fill="#0E2633"
						fillRule="evenodd"
						d="M186.11 22.1254H66.3094c-1.3755 0-2.4906 1.1151-2.4906 2.4907v84.9319c0 1.375 1.1151 2.49 2.4906 2.49H186.11c1.376 0 2.491-1.115 2.491-2.49V24.6161c0-1.3756-1.115-2.4907-2.491-2.4907ZM66.3094 19.6348c-2.7511 0-4.9813 2.2302-4.9813 4.9813v84.9319c0 2.751 2.2302 4.981 4.9813 4.981H186.11c2.751 0 4.981-2.23 4.981-4.981V24.6161c0-2.7511-2.23-4.9813-4.981-4.9813H66.3094Z"
						clipRule="evenodd"
					/>
					<path
						fill="#0E2633"
						d="M63.0938 107.475H188.732v3.467c0 1.101-.892 1.993-1.993 1.993H65.0863c-1.1005 0-1.9925-.892-1.9925-1.993v-3.467ZM188.719 26.6348H63.0806v-3.4671c0-1.1004.8921-1.9925 1.9925-1.9925H186.726c1.101 0 1.993.8921 1.993 1.9925v3.4671Z"
					/>
					<path
						fill="#046395"
						d="M53.2969 112.941H197.078v1.004H53.2969v-1.004Z"
					/>
					<path
						fill="#046395"
						d="M53.2969 113.883H197.07c0 1.555-1.261 2.816-2.816 2.816H56.1128c-1.5552 0-2.8159-1.261-2.8159-2.816Z"
					/>
					<path
						fill="#0E2633"
						d="M114.672 111.638h22.852v1.409c0 .825-.669 1.494-1.495 1.494h-19.863c-.825 0-1.494-.669-1.494-1.494v-1.409Z"
					/>
					<mask
						id="sign-in-mobile-e"
						width="107"
						height="82"
						x="66"
						y="26"
						maskUnits="userSpaceOnUse"
						style={{ maskType: 'alpha' }}
					>
						<path
							fill="#F6F6F6"
							d="M66.4688 26.5864h106.137v80.7773H66.4688z"
						/>
					</mask>
					<g mask="url(#sign-in-mobile-e)">
						<path
							fill="#0077B6"
							fillRule="evenodd"
							d="m169.764 54.1892-5.453 6.323 15.506 31.3534c-2.115 5.4938-9.31 15.8904-17.909 22.3654l-1.123-2.28-2.116-4.275-18.177-36.7614-8.655.939-.936-1.8963 37.84-17.8657 1.023 2.0976Zm-60.51-35.8533s-.143.0671-.212.0975c-15.6874 7.4085-14.4394 32.3107-.206 59.975 13.385 28.1946 32.58 44.6276 48.267 37.2186.069-.03.212-.103.212-.103l1.061 2.146c-22.757 12.64-63.3366 10.683-80.2472-24.6459-17.8591-34.9874 5.7845-67.2676 30.0642-76.8345l1.061 2.1463Zm3.62-4.4756c9.878-2.9695 23.306-2.0304 29.315.2988l9.566 19.3474-2.265 1.067-35.562-18.579-1.054-2.1342Z"
							clipRule="evenodd"
						/>
					</g>
					<path
						fill="#66ADD3"
						d="M85.5547 68.4725c0-2.0065 1.6266-3.6331 3.6332-3.6331h25.9541c2.007 0 3.634 1.6266 3.634 3.6331v59.4055c0 2.007-1.627 3.633-3.634 3.633H89.1879c-2.0066 0-3.6332-1.626-3.6332-3.633V68.4725Z"
					/>
					<path
						fill="#0E2633"
						fillRule="evenodd"
						d="M115.142 67.0193H89.1879c-.8026 0-1.4533.6506-1.4533 1.4532v59.4055c0 .803.6506 1.454 1.4533 1.454h25.9541c.803 0 1.454-.651 1.454-1.454V68.4725c0-.8026-.651-1.4532-1.454-1.4532Zm-25.9541-2.1799c-2.0066 0-3.6332 1.6266-3.6332 3.6331v59.4055c0 2.007 1.6266 3.633 3.6332 3.633h25.9541c2.007 0 3.634-1.626 3.634-3.633V68.4725c0-2.0065-1.627-3.6331-3.634-3.6331H89.1879Z"
						clipRule="evenodd"
					/>
					<path
						fill="#0E2633"
						d="M93.7345 65.8863h16.8265v1.9724c0 .8026-.651 1.4533-1.454 1.4533H95.1878c-.8027 0-1.4533-.6507-1.4533-1.4533v-1.9724Z"
					/>
					<mask
						id="sign-in-mobile-f"
						width="30"
						height="48"
						x="87"
						y="74"
						maskUnits="userSpaceOnUse"
						style={{ maskType: 'alpha' }}
					>
						<rect
							width="28.3785"
							height="46.4046"
							x="87.9922"
							y="74.7866"
							fill="#F6F6F6"
							rx="8"
						/>
					</mask>
					<g mask="url(#sign-in-mobile-f)">
						<path
							fill="#0077B6"
							fillRule="evenodd"
							d="m112.001 92.7178-1.244 1.4428 3.538 7.1544c-.483 1.254-2.124 3.626-4.086 5.104l-.257-.521-.483-.975-4.147-8.3887-1.975.2143-.214-.4327 8.635-4.0768.233.4787Zm-13.8074-8.1813s-.0328.0153-.0484.0223c-3.5798 1.6905-3.295 7.3729-.047 13.6855 3.0538 6.4337 7.4338 10.1837 11.0138 8.4927.016-.007.049-.023.049-.023l.242.489c-5.193 2.885-14.4531 2.438-18.3119-5.624-4.0752-7.9833 1.32-15.3492 6.8604-17.5323l.2421.4898Zm.8258-1.0213c2.2536-.6776 5.3186-.4633 6.6896.0682l2.183 4.4148-.517.2435-8.1149-4.2395-.2407-.487Z"
							clipRule="evenodd"
						/>
					</g>
				</g>
			</g>
			<defs>
				<clipPath id="sign-in-mobile-a">
					<path fill="#fff" d="M0 0h130v144H0z" />
				</clipPath>
				<clipPath id="sign-in-mobile-b">
					<path fill="#fff" d="M0-1h198v145H0z" />
				</clipPath>
				<linearGradient
					id="sign-in-mobile-d"
					x1="-128.552"
					x2="113.533"
					y1="15.5926"
					y2="205.257"
					gradientUnits="userSpaceOnUse"
				>
					<stop offset=".278" stopColor="#0077B6" />
					<stop offset="1" stopColor="#7EC4EA" />
				</linearGradient>
			</defs>
		</svg>

		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 286 100"
			focusable="false"
			aria-hidden="true"
			css={css`
				display: none;
				${from.tablet} {
					display: block;
				}
			`}
		>
			<mask
				id="sign-in-desktop-a"
				width="288"
				height="102"
				x="-1"
				y="-1"
				maskUnits="userSpaceOnUse"
				style={{ maskType: 'alpha' }}
			>
				<path
					fill="#D9D9D9"
					stroke="#000"
					d="M132.132 0 1 99.6866 286 100l-.379-100H132.132Z"
				/>
			</mask>
			<g mask="url(#sign-in-desktop-a)">
				<path fill="url(#sign-in-desktop-b)" d="M0 0h286v100H0z" />
			</g>
			<path
				fill="#66ADD3"
				d="M86.918 10.6736c0-2.4334 1.9726-4.406 4.4059-4.406H197.288c2.433 0 4.406 1.9726 4.406 4.406v75.1218c0 2.4334-1.973 4.406-4.406 4.406H91.3239c-2.4333 0-4.4059-1.9726-4.4059-4.406V10.6736Z"
			/>
			<path
				fill="#0E2633"
				fillRule="evenodd"
				d="M197.288 8.4706H91.3239c-1.2166 0-2.2029.9863-2.2029 2.203v75.1218c0 1.2167.9863 2.203 2.2029 2.203H197.288c1.216 0 2.203-.9863 2.203-2.203V10.6736c0-1.2167-.987-2.203-2.203-2.203ZM91.3239 6.2676c-2.4333 0-4.4059 1.9726-4.4059 4.406v75.1218c0 2.4334 1.9726 4.406 4.4059 4.406H197.288c2.433 0 4.406-1.9726 4.406-4.406V10.6736c0-2.4334-1.973-4.406-4.406-4.406H91.3239Z"
				clipRule="evenodd"
			/>
			<path
				fill="#0E2633"
				d="M88.4727 83.9619H199.6v3.0666c0 .9733-.789 1.7624-1.763 1.7624H90.235c-.9733 0-1.7623-.7891-1.7623-1.7624v-3.0666ZM199.59 12.459H88.4629V9.3924c0-.9733.789-1.7624 1.7624-1.7624H197.827c.974 0 1.763.789 1.763 1.7624v3.0666Z"
			/>
			<path
				fill="#046395"
				d="M79.8086 88.7969H206.983v.8883H79.8086v-.8883Z"
			/>
			<path
				fill="#046395"
				d="M79.8086 89.6297H206.976c0 1.3755-1.115 2.4906-2.491 2.4906H82.2993c-1.3756 0-2.4907-1.1151-2.4907-2.4906Z"
			/>
			<path
				fill="#0E2633"
				d="M134.082 87.6445h20.212v1.2459c0 .73-.591 1.3218-1.321 1.3218h-17.569c-.73 0-1.322-.5918-1.322-1.3218v-1.2459Z"
			/>
			<mask
				id="sign-in-desktop-c"
				width="95"
				height="72"
				x="91"
				y="12"
				maskUnits="userSpaceOnUse"
				style={{ maskType: 'alpha' }}
			>
				<path
					fill="#F6F6F6"
					d="M91.4453 12.416h93.8784v71.4475H91.4453z"
				/>
			</mask>
			<g mask="url(#sign-in-desktop-c)">
				<path
					fill="#0077B6"
					fillRule="evenodd"
					d="m183.447 37.5822-4.841 5.7069 13.764 28.298c-1.877 4.9584-8.264 14.3416-15.896 20.1861l-.997-2.0583-1.878-3.8578-16.134-33.1794-7.682.8475-.831-1.7115 33.587-16.1247.908 1.8932ZM129.738 5.2228s-.127.0605-.188.088c-13.924 6.6865-12.817 29.162-.183 54.1305 11.881 25.4472 28.918 40.2786 42.842 33.5921.061-.0275.189-.0935.189-.0935l.941 1.9371c-20.2 11.408-56.218 9.642-71.228-22.2443-15.8516-31.5779 5.135-60.7124 26.686-69.347l.941 1.937Zm3.213-4.0395c8.768-2.68 20.687-1.8326 26.021.2697l8.491 17.462-2.011.9631-31.565-16.7686-.936-1.9262Z"
					clipRule="evenodd"
				/>
			</g>
			<path
				fill="#66ADD3"
				d="M182.457 23.9421c0-1.7034 1.381-3.0842 3.084-3.0842h46.06c1.703 0 3.084 1.3808 3.084 3.0842v64.5346c0 1.7033-1.381 3.0842-3.084 3.0842h-46.06c-1.703 0-3.084-1.3809-3.084-3.0842V23.9421Z"
			/>
			<path
				fill="#0E2633"
				fillRule="evenodd"
				d="M231.601 23.9421h-46.06v64.5346h46.06V23.9421Zm-46.06-3.0842c-1.703 0-3.084 1.3808-3.084 3.0842v64.5346c0 1.7033 1.381 3.0842 3.084 3.0842h46.06c1.703 0 3.084-1.3809 3.084-3.0842V23.9421c0-1.7034-1.381-3.0842-3.084-3.0842h-46.06Z"
				clipRule="evenodd"
			/>
			<mask
				id="sign-in-desktop-d"
				width="47"
				height="52"
				x="187"
				y="30"
				maskUnits="userSpaceOnUse"
				style={{ maskType: 'alpha' }}
			>
				<rect
					width="45.8222"
					height="50.6687"
					x="187.289"
					y="30.6803"
					fill="#F6F6F6"
					rx="8"
				/>
			</mask>
			<g mask="url(#sign-in-desktop-d)">
				<path
					fill="#0077B6"
					fillRule="evenodd"
					d="m227.682 50.8755-2.043 2.4078 5.808 11.9393c-.793 2.092-3.487 6.0508-6.707 8.5167l-.421-.8684-.792-1.6277-6.807-13.9987-3.241.3576-.351-.7221 14.171-6.8032.383.7987Zm-22.661-13.6527s-.053.0255-.079.0371c-5.875 2.8211-5.407 12.3038-.077 22.8382 5.012 10.7365 12.201 16.994 18.075 14.1729.026-.0116.08-.0395.08-.0395l.397.8173c-8.522 4.8133-23.719 4.068-30.052-9.3851-6.688-13.323 2.167-25.6152 11.259-29.2583l.397.8174Zm1.356-1.7043c3.699-1.1308 8.728-.7732 10.978.1137l3.583 7.3674-.849.4064-13.317-7.0749-.395-.8126Z"
					clipRule="evenodd"
				/>
			</g>
			<path
				fill="#66ADD3"
				d="M71.8125 23.5545c0-1.7031 1.3807-3.0838 3.0838-3.0838h22.03c1.7031 0 3.0837 1.3807 3.0837 3.0838v50.423c0 1.7031-1.3806 3.0838-3.0837 3.0838h-22.03c-1.7031 0-3.0838-1.3807-3.0838-3.0838v-50.423Z"
			/>
			<path
				fill="#0E2633"
				fillRule="evenodd"
				d="M96.9263 22.321h-22.03c-.6812 0-1.2335.5523-1.2335 1.2335v50.423c0 .6813.5523 1.2335 1.2335 1.2335h22.03c.6812 0 1.2335-.5522 1.2335-1.2335v-50.423c0-.6812-.5523-1.2335-1.2335-1.2335Zm-22.03-1.8503c-1.7031 0-3.0838 1.3807-3.0838 3.0838v50.423c0 1.7031 1.3807 3.0838 3.0838 3.0838h22.03c1.7031 0 3.0837-1.3807 3.0837-3.0838v-50.423c0-1.7031-1.3806-3.0838-3.0837-3.0838h-22.03Z"
				clipRule="evenodd"
			/>
			<path
				fill="#0E2633"
				d="M78.7695 21.3594h14.2819v1.6741c0 .6813-.5523 1.2335-1.2335 1.2335H80.0031c-.6813 0-1.2336-.5522-1.2336-1.2335v-1.6741Z"
			/>
			<mask
				id="sign-in-desktop-e"
				width="25"
				height="41"
				x="73"
				y="28"
				maskUnits="userSpaceOnUse"
				style={{ maskType: 'alpha' }}
			>
				<rect
					width="24.0873"
					height="39.3877"
					x="73.867"
					y="28.9142"
					fill="#F6F6F6"
					rx="8"
				/>
			</mask>
			<g mask="url(#sign-in-desktop-e)">
				<path
					fill="#0077B6"
					fillRule="evenodd"
					d="m94.5712 45.0348-1.06 1.2497 3.0139 6.1965c-.4111 1.0858-1.8095 3.1405-3.4808 4.4203l-.2183-.4507-.4112-.8448-3.533-7.2654-1.6822.1855-.1819-.3747 7.3546-3.5309.1989.4145Zm-11.7609-7.0859s-.0279.0133-.0412.0193c-3.0491 1.4642-2.8065 6.3857-.04 11.8532 2.6015 5.5723 6.3322 8.82 9.3813 7.3558.0133-.006.0412-.0204.0412-.0204l.2062.4241c-4.4232 2.4982-12.3103 2.1114-15.5971-4.8709-3.4712-6.9148 1.1243-13.2945 5.8434-15.1853l.2062.4242Zm.7035-.8845c1.9199-.5869 4.5299-.4013 5.6979.059l1.8593 3.8238-.4403.2109-6.912-3.6719-.2049-.4218Z"
					clipRule="evenodd"
				/>
			</g>
			<defs>
				<linearGradient
					id="sign-in-desktop-b"
					x1="290.767"
					x2="133.464"
					y1="82.7491"
					y2="-74.4882"
					gradientUnits="userSpaceOnUse"
				>
					<stop stopColor="#0077B6" />
					<stop offset="1" stopColor="#7EC4EA" />
				</linearGradient>
			</defs>
		</svg>
	</>
);