Template:Icon/styles.css

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

@media (prefers-color-scheme: light) {
	.loka-icon {
		background: #fff;
		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, or the bundled
   label link for a linked one. */
.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. Hovering
   the *parent* span to underline both children makes the pair read and
   behave as one link regardless of which half the pointer is actually
   over -- the icon sits in the link the same way an emoji sits in text. */
.loka-icon--linked a {
	text-decoration: none;
}

.loka-icon--linked:hover a {
	text-decoration: underline;
}

.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;
}