<form class="Search">
	<label class="Search-label" for="search">
		<span class="u-hiddenVisually">Search</span>
		<svg class="Search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
			<path d="M13.3 0h1.4c1.2.1 2.4.5 3.5 1a9.6 9.6 0 0 1 5.4 9.6 9.5 9.5 0 0 1-10.4 8.7 9.5 9.5 0 0 1-4.7-1.5l-.2-.2-.1.2-5.3 5.5c-.3.3-.6.6-1 .7h-.4l-.7-.4c-.5-.5-.5-1.2 0-1.8l5.4-5.5.3-.3-1-1.5c-1.6-3-1.8-6-.3-9A9.4 9.4 0 0 1 11.8.3l1.5-.3zm.6 2.5a7.2 7.2 0 0 0 0 14.4 7.2 7.2 0 0 0 0-14.4z" />
		</svg>
	</label>
	<input id="search" class="Search-input" type="search" name="search" autocomplete="off" placeholder="Search …">
	<button class="Search-clear" type="button" hidden>
		<svg class="Search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.6 12 2.2 2.3c.4.3.5.7.3 1.1-.2.8-1.2 1-1.8.4l-2-2-.3-.3-1 1L9.7 16c-.5.4-1.2.4-1.6 0a1 1 0 0 1-.2-1.4l.2-.2 2-2 .4-.3-1.1-1-1.2-1.3c-.5-.4-.5-1.1 0-1.6.4-.4 1-.4 1.5 0l2 2.1.3.3 1-1 1-1.3c.6-.7 1.4-.5 1.7-.2.4.4.6 1.1-.1 1.7l-2 2-.1.2h.1z"/><circle cx="11.9" cy="12.1" r="11" stroke-width="2" stroke-miterlimit="10"></svg>
		<span class="u-hiddenVisually">Clear search query</span>
	</button>
</form>
