UI: fixes sidebar settings border and active styles (#13990)

- active setting should now correctly show an arrow which was previously floating in the middle of nowhere
- uses a correct color for border separation, previously the border was present but invisible as similar to the background
- slighty tweak padding
- makes arrow computation based on a variable

app/assets/stylesheets/common/components/navs.scss

@@ -69,7 +69,7 @@
   background: var(--primary-low);
 
   li {
-    border-bottom: 1px solid var(--primary-low);
+    border-bottom: 1px solid var(--primary-low-mid-or-secondary-high);
 
     &:last-of-type {
       border-bottom: 0;
@@ -82,7 +82,7 @@
 
   a {
     margin: 0;
-    padding: 13px;
+    padding: 0.75em;
     font-size: $font-up-1;
     line-height: $line-height-small;
     cursor: pointer;
@@ -92,13 +92,16 @@
     &.active {
       color: var(--secondary);
       background-color: var(--quaternary);
+      position: relative;
+
+      --arrow-thickness: 8px;
 
       &::after {
-        left: 90%;
-        top: 33%;
-        content: " ";
         position: absolute;
-        border: 8px solid transparent;
+        right: 0;
+        top: calc(50% - var(--arrow-thickness));
+        content: " ";
+        border: var(--arrow-thickness) solid transparent;
         border-left-color: var(--secondary);
       }
     }