.swatch[data-icon]{position:relative;background-image:linear-gradient(155deg,#ffffff20,#00000030);background-size:auto}
.swatch[data-icon]::after{content:"";position:absolute;inset:3px;background:#fff;opacity:.82;mask:var(--glyph) center/contain no-repeat;-webkit-mask:var(--glyph) center/contain no-repeat}
.swatch[data-icon="water"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%205h3V3h3v2h3V3h3v2h2v3H1zm0%206h3V9h3v2h3V9h3v2h2v3H1z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="liquid"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7%201h2v2h2v3h2v3h1v3h-2v2H4v-2H2V9h1V6h2V3h2z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="powder"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7%201h2v2H7zm-4%204h2v2H3zm7%200h2v2h-2zM6%208h2v2H6zm-5%204h3v3H1zm5%200h3v3H6zm5-3h3v3h-3zm1%204h3v2h-3z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="gas"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4%202h5v2h3v2h2v5h-2v2H4v-2H1V7h2V4h1z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="solid"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M4%201h7v2h2v3h2v6h-3v3H4v-2H1V6h2V3h1z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="wood"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2%201h12v14H2zm3%202v6h2V3zm4%204v6h2V7z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="brick"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%201h6v4H1zm8%200h6v4H9zM1%207h3v3H1zm5%200h7v3H6zm-5%205h6v3H1zm8%200h6v3H9z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="metal"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M1%202h14v12H1zm2%202v2h2V4zm8%200v2h2V4zM3%2010v2h2v-2zm8%200v2h2v-2z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="glass"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M2%201h12v14H2zm2%202v10h8V3zm1%204h2V5h2v2H7v2H5zm4%202h2v2H9z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="ice"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7%200h2v4h2V2h2v2h-2v2H9v1h7v2h-5v2h2v2h-2v-2H9v5H7v-5H5v2H3v-2h2V9H0V7h5V5H3V3h2v2h2z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="plant"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7%207H4V5H2V1h5v2h2v4h3V5h3v4h-2v2H9v4H7z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="fire"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M7%200h2v3h2v3h2v2h2v5h-2v2H3v-2H1V9h2V6h2V3h2zm0%209v2H5v2h6v-2H9V9z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="explosive"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M9%200h4v2h-2v3h2v2h2v6h-2v2H3v-2H1V7h2V5h6zm-5%207v2h2V7z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="electric"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8%200h5l-3%206h5L5%2016l2-7H1z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="nuclear"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6%201h4v4H6zM1%209l3-4%203%203-2%204zm10-1%203-3%202%204-4%203zM6%2012h4v3H6zM7%206h2v3H7z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="person"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6%200h4v4H6zm1%205h2v2h4v2H9v2h2v4H9v-3H7v3H5v-4h2V9H3V7h4z%22%2F%3E%3C%2Fsvg%3E")}
.swatch[data-icon="special"]{--glyph:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M6%200h4v4h4v2h2v4h-4v4h-2v2H6v-4H2v-2H0V6h4V2h2z%22%2F%3E%3C%2Fsvg%3E")}