fixup! Bug 40925: Implemented the Security Level component

Bug 42641: Use moz-button-group for panel buttons.

Also tweak the "Learn more" link to have block-end padding to ensure its
focus outline is visible, and restrict it to align-start so that it does
not span the full width.

Also switch from `em` to `px` units for the vertical spacing.

browser/components/securitylevel/content/securityLevelPanel.css

@@ -3,8 +3,8 @@
 #securityLevel-background {
   min-height: 10em;
   padding-inline: 16px;
-  padding-block: 1em 0;
-  gap: 1em;
+  padding-block: 16px 8px;
+  gap: 16px;
   background-repeat: no-repeat;
   background-position-y: top 0.4em;
   /* Icon center should be in-line with end padding.
@@ -61,3 +61,7 @@
   padding-inline-end: 5em;
   max-width: 20em;
 }
+
+#securityLevel-learnMore {
+  align-self: start;
+}

browser/components/securitylevel/content/securityLevelPanel.inc.xhtml

@@ -28,14 +28,16 @@
       data-l10n-id="security-level-panel-learn-more-link"
     ></html:a>
   </vbox>
-  <hbox class="panel-footer">
+  <html:moz-button-group class="panel-footer">
     <button
       id="securityLevel-settings"
+      class="footer-button"
       data-l10n-id="security-level-panel-open-settings-button"
     />
     <button
       id="securityLevel-restoreDefaults"
+      class="footer-button"
       data-l10n-id="security-level-restore-defaults-button"
     />
-  </hbox>
+  </html:moz-button-group>
 </panel>