<div class="metallicss">ほげほげ</div>

.metallicss {
	--convexity: 50%;
	border-radius: 64px;
	background: #c0c0c0;
	padding: 1em;
	--seed: 12;
	font-size: 3em;
	--metal: gold;
	width: 50%;
	text-align: center;
}

const base = [
		tag("rect", {
			props: {
				fill: "url(#gradient)",
				height: 1024,
				width: 1024,
				x: 0,
				y: 0
			}
		}),
		tag("rect", {
			props: {
				filter: "url(#texture)",
				height: 1024,
				style: "mix-blend-mode: luminosity; opacity: 0.5",
				width: 1024,
				x: 0,
				y: 0
			}
		}),
		tag("rect", {
			props: {
				filter: "url(#texture)",
				height: 1024,
				style: "mix-blend-mode: screen; opacity: 0.25",
				width: 1024,
				x: 0,
				y: 0
			}
		})
	],
	defs = tag("defs", {
		inner: [
			tag("linearGradient", {
				inner: [
					tag("stop", { props: { offset: "35%", ["stop-color"]: "#b0b0b0" } }),
					tag("stop", { props: { offset: "40%", ["stop-color"]: "#efefef" } }),
					tag("stop", { props: { offset: "45%", ["stop-color"]: "#909090" } }),
					tag("stop", { props: { offset: "49%", ["stop-color"]: "#707070" } }),
					tag("stop", { props: { offset: "51%", ["stop-color"]: "#303030" } }),
					tag("stop", { props: { offset: "60%", ["stop-color"]: "#909090" } }),
					tag("stop", { props: { offset: "70%", ["stop-color"]: "#505050" } }),
					tag("stop", { props: { offset: "100%", ["stop-color"]: "#505050" } })
				],
				props: { id: "gradient", x1: 0, x2: 0, y1: 0, y2: 1 }
			})
		]
	}),
	serializer = new XMLSerializer(),
	xmlns = "http://www.w3.org/2000/svg";
let blocked = document.body.className.indexOf("block-metallicss") !== -1;

function tag(name, { inner, props }) {
	const elem = document.createElementNS("http://www.w3.org/2000/svg", name);

	props && Object.entries(props).forEach((prop) => elem.setAttribute(...prop));
	inner?.forEach((innerElem) => elem.append(innerElem));

	return elem;
}

function sheen({ offset, radii: { x: rx, y: ry }, stroke, vertical, x, y }) {
	const margin = offset / (vertical ? x : y) / 2,
		size = offset / 3 / (vertical ? x : y),
		diff = 1024 - margin * 2 + size * 2;

	return tag("rect", {
		props: {
			"stroke-width": size,
			fill: "none",
			height: vertical ? 1024 + size : diff,
			rx,
			ry,
			stroke,
			width: vertical ? diff : 1024 + size,
			x: vertical ? margin - size : -size / 2,
			y: vertical ? -size / 2 : margin - size
		}
	});
}

export const unblock = () => {
		blocked = false;
	},
	metallicss = (elem) => {
		const { offsetWidth: width, offsetHeight: height } = elem,
			{ backgroundColor: background, borderRadius } = getComputedStyle(elem),
			depthValue = getComputedStyle(elem).getPropertyValue("--convexity"),
			seed = getComputedStyle(elem).getPropertyValue("--seed") || 23,
			metal = getComputedStyle(elem).getPropertyValue("--metal").replace(/ /g, ""),
			rawDepth =
				depthValue === "0%" || depthValue === " 0%"
					? 0
					: (depthValue && parseInt(depthValue)) || 20,
			lustre = `filter: ${
				{
					copper: "brightness(0.85) sepia(0.5) saturate(2) hue-rotate(-33.75deg)",
					gold: "brightness(0.95) sepia(1) saturate(1.5)",
					iron: "",
					silver: "brightness(1.125)"
				}[metal || "iron"]
			}`,
			depth = rawDepth * ((height > width ? width : height) / 640),
			absDepth = Math.abs(depth),
			x = width / (64 * (absDepth / 10 + 1)),
			y = height / (64 * (absDepth / 10 + 1)),
			radius = parseInt(borderRadius),
			radii = {
				x: height / 2 < radius ? 512 * (y / x) : radius * (1024 / width),
				y: width / 2 < radius ? 512 * (x / y) : radius * (1024 / height)
			},
			inverse = depth < 0,
			fill = background === "rgba(0, 0, 0, 0)" ? "gray" : background;

		elem.style.backgroundImage = `url('data:image/svg+xml;utf8,${encodeURIComponent(
			serializer.serializeToString(
				tag("svg", {
					inner: [
						tag("filter", {
							inner: [
								tag("feImage", {
									props: {
										preserveAspectRatio: "none",
										height: 1024,
										width: 1024,
										href: `data:image/svg+xml;utf8,${encodeURIComponent(
											serializer.serializeToString(
												tag("svg", {
													props: { height: 2048, width: 2048, xmlns },
													inner: [
														tag("rect", {
															props: {
																fill: "white",
																height: 2048,
																width: 2048
															}
														}),
														tag("g", {
															inner: Array.from({ length: 24 })
																.map((_, index) =>
																	sheen({
																		offset: Math.pow(
																			3,
																			index % 2 === 0 ? index / 4 : (index - 1) / 4
																		),
																		radii,
																		stroke: Math.ceil(index / 2) % 2 === 0 ? "red" : "white",
																		vertical: index % 2 === 0,
																		x,
																		y
																	})
																)
																.reverse(),
															props: { transform: "translate(512,512)" }
														})
													]
												})
											)
										)}`,
										result: "image"
									}
								}),
								tag("feGaussianBlur", {
									props: {
										["color-interpolation-filters"]: "sRGB",
										in: "image",
										result: "blur",
										stdDeviation: `${4 * (y / x)},${6 * (x / y)}`
									}
								}),
								tag("feDisplacementMap", {
									props: {
										["color-interpolation-filters"]: "sRGB",
										in: "SourceGraphic",
										in2: "blur",
										result: "displacement",
										scale: 50 + Math.abs(rawDepth) > 100 ? 100 : 50 + Math.abs(rawDepth),
										xChannelSelector: "R",
										yChannelSelector: "G"
									}
								})
							],
							props: {
								filterUnits: "userSpaceOnUse",
								height: 2048,
								id: "noise",
								width: 2048,
								x: 0,
								y: 0
							}
						}),
						tag("filter", {
							inner: [
								tag("feTurbulence", {
									props: {
										["color-interpolation-filters"]: "sRGB",
										baseFrequency: 0.005,
										result: "turbulence",
										seed,
										type: "fractalNoise"
									}
								}),
								tag("feDisplacementMap", {
									props: {
										["color-interpolation-filters"]: "sRGB",
										in2: "turbulence"
									}
								})
							],
							props: {
								filterUnits: "userSpaceOnUse",
								height: 1024,
								id: "texture",
								width: 1024,
								x: 0,
								y: 0
							}
						}),
						defs,
						tag("g", { inner: base, props: { filter: "url(#noise)" } }),
						inverse &&
							tag("rect", {
								props: {
									fill: "#20222480",
									height: 1024,
									opacity: `${rawDepth > -25 ? 25 : rawDepth * -1}%`,
									width: 1024,
									x: 0,
									y: 0
								}
							}),
						tag("rect", {
							props: {
								fill,
								height: 1024,
								opacity: 0.5,
								style: "mix-blend-mode: overlay",
								width: 1024,
								x: 0,
								y: 0
							}
						})
					],
					props: {
						preserveAspectRatio: "none",
						style: `transform: scale(1, ${inverse ? "-" : ""}1); ${lustre}`,
						viewBox: "256 256 512 512",
						xmlns
					}
				})
			)
		)}')`;
		elem.style.backgroundSize = "100% 100%";
		elem.style.border = "none";
		elem.style.boxShadow = `inset #ffffff80 0px ${
			inverse ? "-" : ""
		}4px 8px, inset ${
			{
				copper: "#402020",
				gold: "#604000",
				iron: "#202020",
				silver: "#404040"
			}[metal || "iron"]
		}${inverse ? "" : "c0"} 0px ${inverse ? "" : "-"}8px 16px ${
			inverse ? "" : ", #00000030 1px 2px 2px, #00000020 2px 4px 4px"
		}`;
		elem.style.color = `#${
			inverse
				? `${
						{
							copper: "100000",
							gold: "302000",
							iron: "000000",
							silver: "101010"
						}[metal || "iron"]
				  }c0`
				: "ffffffe0"
		}`;
		elem.style.textRendering = "geometricPrecision";
		elem.style.textShadow = inverse
			? "white .5px .5px 1px"
			: "black -.5px -.5px 1px";
		elem.style.transform = "translateZ(0)";
		elem.style.transition = "none";
	},
	traverse = () =>
		!blocked &&
		Array.from(document.querySelectorAll(".metallicss"))
			.filter(
				(elem) =>
					window.getComputedStyle(elem).getPropertyValue("display") != "none"
			)
			.forEach(metallicss);

if (document.readyState !== "loading") traverse();
else document.addEventListener("DOMContentLoaded", traverse);

export default metallicss;