Getting the popover Application working on the most superficial level, and creating a generic popover mixin

templates/Apps/HeroSkillsCardV1/content.hbs

@@ -104,7 +104,13 @@
 		{{/each}}
 	</ol>
 
-	<div class="ammo half-pill">
+	<div class="ammo half-pill with-icon">
+		<rc-icon
+			class="ammo-info-icon"
+			name="icons/info-circle"
+			var:size="16px"
+			var:fill="currentColor"
+		></rc-icon>
 		<div class="label">
 			{{ rc-i18n "RipCrypt.common.ammo"}}
 		</div>

templates/Apps/HeroSkillsCardV1/style.css

@@ -116,6 +116,16 @@
 		--input-background: var(--base-background);
 		--input-text: var(--base-text);
 
+		&.with-icon {
+			grid-template-columns: min-content minmax(0, 1.5fr) minmax(0, 1fr);
+			gap: 4px;
+			padding: 2px 0 2px 4px;
+			.label {
+				padding: 0;
+			}
+		}
+
+
 		.input {
 			margin: 2px;
 			border-radius: 999px;