improve checkbox / settings modal styles

src/components/checkbox/checkbox.vue

@@ -61,12 +61,14 @@ export default {
 <style lang="scss">
 .checkbox {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   min-height: 1.2em;
+  align-items: baseline;
+  gap: 0 0.5em;
 
   &-indicator,
   & .label {
-    vertical-align: middle;
+    align-self: center;
   }
 
   & > &-indicator {
@@ -138,15 +140,5 @@ export default {
       content: "–";
     }
   }
-
-  & > .label {
-    &.-after {
-      margin-left: 0.5em;
-    }
-
-    &.-before {
-      margin-right: 0.5em;
-    }
-  }
 }
 </style>