1 files changed, 27 insertions, 1 deletions

diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 5c81259..60b3df0 100644
--- a/src/layouts/_hlist.scss
+++ b/src/layouts/_hlist.scss
@@ -18,6 +18,32 @@
                 @each $mod, $size in vars.$sizes {
                         @include bem.modifier($mod) {
                                 gap: props.get($size);
+
+                                @include bem.modifier('separated') {
+                                        @include bem.elem('item') {
+                                                &::after {
+                                                        content: '·';
+                                                        margin-inline: calc(.65 * props.get($size));
+                                                }
+                                        }
+                                }
+                        }
+                }
+
+                @include bem.modifier('separated') {
+                        gap: 0;
+
+                        @include bem.elem('item') {
+                                &::after {
+                                        content: '·';
+                                        margin-inline: calc(.65 * props.get(vars.$gap));
+                                }
+
+                                &:last-child {
+                                        &::after {
+                                                display: none,
+                                        }
+                                }
                         }
                 }
 
@@ -35,7 +61,7 @@
                         @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
                                 @include bem.modifier('buttons-#{$mod}') {
                                         margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
-    
+
                                         @include bem.modifier('pill') {
                                                 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
                                         }