1 files changed, 31 insertions, 18 deletions

diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index fc861aa..e4bc666 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -4,8 +4,9 @@
 @include iro.props-namespace('bubble-group') {
     @include iro.props-store((
         --dims: (
-            --spacing-x: fn.global-dim(--size --225),
-            --spacing-y: fn.global-dim(--size --150),
+            --spacing-x:  fn.global-dim(--size --225),
+            --spacing-y:  fn.global-dim(--size --150),
+            --arrow-size: fn.global-dim(--size --100),
 
             --compact: (
                 --spacing-x: fn.global-dim(--size --225),
@@ -32,11 +33,33 @@
             min-width:   0;
             max-width:   100%;
 
+            &::before {
+                content:             '';
+                display:             none;
+                position:            absolute;
+                top:                 0;
+                left:                calc(-1 * fn.dim(--arrow-size));
+                border:              fn.dim(--arrow-size) solid fn.global-color(--bg);
+                border-bottom-color: transparent;
+                border-left-color:   transparent;
+            }
+
             @include iro.bem-next-twin-elem {
                 margin-top: fn.dim(--spacing-y);
             }
         }
         
+        @include iro.bem-modifier('right') {
+            @include iro.bem-elem('bubble') {
+                &::before {
+                    right:              calc(-1 * fn.dim(--arrow-size));
+                    left:               auto;
+                    border-right-color: transparent;
+                    border-left-color:  fn.global-color(--bg);
+                }
+            }
+        }
+        
         @include iro.bem-modifier('compact') {
             gap: 0 fn.dim(--compact --spacing-x);
         
@@ -70,24 +93,14 @@
         }
         
         @include iro.bem-modifier('arrow') {
-            @include iro.bem-elem('avatar') {
-                @include iro.bem-next-elem('bubble') {
-                    &::before {
-                        display: block;
-                    }
+            @include iro.bem-elem('bubble') {
+                &::before {
+                    display: block;
                 }
-            }
-        
-            @include iro.bem-modifier('right') {
-                @include iro.bem-elem('avatar') {
-                    @include iro.bem-next-elem('bubble') {
-                        &::before {
-                            display: none;
-                        }
 
-                        &::after {
-                            display: block;
-                        }
+                @include iro.bem-next-twin-elem {
+                    &::before {
+                        display: none;
                     }
                 }
             }