Use new style highlight for selected tags

ts/editor/AddTagBadge.svelte

@@ -46,7 +46,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         :global(svg) {
-            padding: 1px;
+            padding: 0px 1px 2px;
             cursor: pointer;
             fill: currentColor;
             opacity: 0.6;

ts/editor/Tag.svelte

@@ -108,6 +108,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         &.tag {
+            --border-color: var(--medium-border);
+
+            border: 1px solid var(--border-color) !important;
             border-radius: 5px;
         }
 
@@ -124,7 +127,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         &.selected {
-            box-shadow: 0 0 0 0.25rem transparentize(button.$focus-color, 0.5) !important;
+            box-shadow: 0 0 0 2px var(--focus-shadow);
+            --border-color: var(--focus-border);
         }
     }
 

ts/editor/TagEditor.svelte

@@ -374,12 +374,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: shortenTags = shortenTags || assumedRows > 2;
 </script>
 
-<Spacer --height={`${height}px`} />
+<Spacer --height="{height}px" />
 
 <StickyBottom class="d-flex" bind:height>
     {#if !wrap}
         <TagOptionsBadge
-            --buttons-size={`${size}rem`}
+            --buttons-size="{size}rem"
             showSelectionsOptions={tags.some((tag) => tag.selected)}
             bind:badgeHeight
             on:tagselectall={selectAllTags}