Modifying separated inline list styles to wrap neatly

The "//" separator is hidden when the list items wrap.

src/components/Footer/style.css

@@ -11,7 +11,7 @@ footer {
 
   & ul {
     @apply --inline-list;
-    @apply --with-separator;
+    @apply --with-separator-left;
     flex: 1;
   }
 

src/components/Form/style.css

@@ -50,12 +50,14 @@
 
   @media (min-width: 700px) {
     @apply --inline-list;
-    @apply --with-separator;
+    @apply --with-separator-left;
     float: right;
   }
 
   & svg {
+    width: 1em;
     height: 1em;
+    margin-right: 0.5rem;
     vertical-align: middle;
   }
 }

src/components/Header/style.css

@@ -44,11 +44,12 @@
 
   & ul {
     @apply --inline-list;
+    @apply --with-separator-right;
     text-align: right;
   }
 
   & li {
-    margin-left: 1em;
+    line-height: 2.4rem;
 
     & a:hover,
     & a:active {

src/globals.css

@@ -30,14 +30,52 @@
       white-space: nowrap;
     }
   }
-  --with-separator: {
+  --list-separator-width: 2ex;
-    & li:after {
+  --separator-style: {
       content: '//';
       padding: 0 0.5rem;
+      display: inline-block;
+      box-sizing: border-box;
+      width: var(--list-separator-width);
+  }
+  --with-separator-left: {
+    overflow: hidden;
+
+    & li {
+      padding-right: var(--list-separator-width);
+    }
+
+    & li:before {
+      @apply --separator-style;
+      margin-left: -var(--list-separator-width);
+    }
+
+    & li:last-child {
+      padding-right: 0;
+    }
+
+    & li:first-child:before {
+      visibility: hidden;
+    }
+  }
+  --with-separator-right: {
+    overflow: hidden;
+
+    & li {
+      padding-left: var(--list-separator-width);
+    }
+
+    & li:after {
+      @apply --separator-style;
+      margin-right: -var(--list-separator-width);
+    }
+
+    & li:first-child {
+      padding-left: 0;
     }
 
     & li:last-child:after {
-      content: '';
+      visibility: hidden;
     }
   }
 }