Template:Icon/styles.css

.loka-icon {
	display: inline;
	border-radius: 999px;
	padding: .12em .75em;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(255, 255, 255, .15);
}

@media (prefers-color-scheme: light) {
	.loka-icon {
		background: rgba(0, 0, 0, .06);
		border-color: #e0d8c3;
	}
}

/* An infobox row is already its own compact, bordered container -- a pill
   inside a pill reads as visual noise rather than a badge, so an icon used
   there (e.g. a future infobox row value) falls back to plain inline
   icon+text with no chip of its own. */
.loka-infobox .loka-icon {
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
}

/* Breathing room between the icon graphic and whatever sits right after it
   -- the editor's own following word for a bare icon. A linked icon's own
   rules below zero this back out: its gap is anchor padding instead (see
   next comment), not img margin. */
.loka-icon img {
	margin-right: .2em;
}

/* A linked icon is really two adjacent <a>s (image + label) to the same
   target, not one -- MediaWiki here doesn't parse a [[File:...]] nested
   inside another link's label (confirmed live: the brackets come out as
   literal text), and raw <a href> HTML is sanitized away (also confirmed
   live), so a true single anchor isn't reachable from wikitext.

   To make the *whole pill* clickable rather than just the icon and text
   glyphs, the pill's own padding moves off the outer span and onto the
   two anchors themselves -- every visible pixel of the pill, gap and
   padding included, then belongs to one <a> or the other, both pointing
   at the same target, so there's no dead unclickable sliver anywhere in
   the shape. overflow:hidden keeps each anchor's own box from poking a
   square corner out past the pill's rounded ends. cursor:pointer covers
   the anchors' own padding and the pill's border/corners too, so the
   pointer cursor shows over the *entire* pill, not just the two glyphs. */
.loka-icon--linked {
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.loka-icon--linked:hover {
	background: rgba(240, 207, 142, .16);
	border-color: rgba(240, 207, 142, .5);
}

/* Both anchors stay plain inline (not flex) so the icon and label sit on
   one shared line box and the per-icon vertical-align rules below (the
   same ones already proven live elsewhere on this wiki, e.g. the 14px
   continent shield in Template:Infobox tournament's host row) actually
   take effect -- vertical-align has no effect on a flex child, so an
   earlier inline-flex version of this rule silently broke every one of
   those already-tuned values and left the icon visibly off against the
   text. */
.loka-icon--linked a {
	display: inline;
	text-decoration: none;
}

.loka-icon--linked img {
	margin-right: 0;
}

/* TemplateStyles' selector sanitizer rejects attribute selectors (no
   [typeof="mw:File"] to single out the image's auto-generated wrapper
   span), so the two anchors are told apart structurally instead: the
   image sits inside the first child of the pill, the label link is the
   last child of the pill directly. */
.loka-icon--linked > :first-child a {
	padding: .12em .25em .12em .75em;
}

.loka-icon--linked > a:last-child {
	padding: .12em .75em .12em 0;
}

.loka-icon--orbs img {
	vertical-align: -1.5px;
}

.loka-icon--ascalon img {
	vertical-align: middle;
}

.loka-icon--kalros img {
	vertical-align: middle;
}

.loka-icon--garama img {
	vertical-align: middle;
}

.loka-icon--aladra img {
	vertical-align: middle;
}

.loka-icon--balak img {
	vertical-align: middle;
}

.loka-icon--rivina img {
	vertical-align: middle;
}

.loka-icon--zyre img {
	vertical-align: middle;
}

.loka-icon--the-end img {
	vertical-align: middle;
}

.loka-icon--nether img {
	vertical-align: middle;
}

.loka-icon--loka img {
	vertical-align: -1.5px;
}