Simplified bubble arrows

2 files changed, 34 insertions, 42 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;
                     }
                 }
             }
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index 477f475..d91b6d1 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -4,10 +4,9 @@
 @include iro.props-namespace('bubble') {
     @include iro.props-store((
         --dims: (
-            --pad-x:      fn.global-dim(--size --200),
-            --pad-y:      fn.global-dim(--size --150),
-            --rounding:   0,
-            --arrow-size: fn.global-dim(--size --100),
+            --pad-x:    fn.global-dim(--size --200),
+            --pad-y:    fn.global-dim(--size --150),
+            --rounding: 0,
 
             --75: (
                 --pad-x: fn.global-dim(--size --150),
@@ -29,26 +28,6 @@
         background-color: fn.global-color(--bg);
         color:            fn.global-color(--fg);
 
-        &::before,
-        &::after {
-            content:             '';
-            display:             none;
-            position:            absolute;
-            top:                 0;
-            border:              fn.dim(--arrow-size) solid fn.global-color(--bg);
-            border-bottom-color: transparent;
-        }
-
-        &::before {
-            left:              calc(-1 * fn.dim(--arrow-size));
-            border-left-color: transparent;
-        }
-
-        &::after {
-            right:              calc(-1 * fn.dim(--arrow-size));
-            border-right-color: transparent;
-        }
-
         @include iro.bem-modifier('highlight') {
             box-shadow: -3px 0 0 0 fn.color(--highlight);
         }