1 files changed, 42 insertions, 22 deletions

diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 094e09b..ac77a66 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -1,8 +1,6 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-@use 'header';
-
 @include iro.props-namespace('dialog') {
     @include iro.props-store((
         --dims: (
@@ -12,6 +10,16 @@
             --rounding: 8px,
             --border:   1px,
 
+            --header: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
+            --sidebar: (
+                --pad-x: fn.global-dim(--size --75),
+                --pad-y: fn.global-dim(--size --75),
+            ),
+
             --body: (
                 --pad-x: fn.global-dim(--size --200),
                 --pad-y: fn.global-dim(--size --200),
@@ -28,18 +36,15 @@
 
     @include iro.props-store((
         --colors: (
-            --border: rgba(#000, .2),
-            --shadow: 0 .2em .5em rgba(#000, .2),
-
-            --sidebar: (
-                --border: fn.global-color(--obj),
-            ),
+            --outer-border: rgba(#000, .2),
+            --inner-border: fn.global-color(--obj),
+            --shadow:       0 .2em .5em rgba(#000, .2),
         ),
     ), 'colors');
 
     @include iro.props-store((
         --colors: (
-            --border: rgba(#fff, .2),
+            --outer-border: rgba(#fff, .2),
         ),
     ), 'colors-dark');
 
@@ -57,7 +62,7 @@
         max-width:             fn.dim(--width-md);
         margin:                0 auto;
         overflow:              hidden;
-        border:                fn.dim(--border) solid fn.color(--border);
+        border:                fn.dim(--border) solid fn.color(--outer-border);
         border-radius:         fn.dim(--rounding);
         background-clip:       padding-box;
         background-color:      fn.global-color(--bg);
@@ -72,29 +77,34 @@
             max-width: fn.dim(--width-lg);
         }
 
-        @include iro.bem-elem('sidebar-header') {
-            grid-area:    sidebar-header;
-            border-right: 1px solid fn.color(--sidebar --border);
+        @include iro.bem-elem('header') {
+            grid-area:     sidebar-header / sidebar-header / header / header;
+            padding:       fn.dim(--header --pad-y) fn.dim(--header --pad-x);
+            border-bottom: 1px solid fn.color(--inner-border);
 
-            @include iro.bem-sibling-elem('header') {
-                grid-area: header;
+            @include iro.bem-modifier('sidebar') {
+                grid-area:    sidebar-header;
+                border-right: 1px solid fn.color(--inner-border);
+    
+                @include iro.bem-sibling-elem('header') {
+                    grid-area: header;
+                }
             }
         }
 
-        @include iro.bem-elem('header') {
-            grid-area: sidebar-header / sidebar-header / header / header;
+        @include iro.bem-elem('title') {
+            padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
+            padding-left:  calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
         }
 
         @include iro.bem-elem('close-btn') {
             margin-left: auto;
         }
 
-        @include iro.bem-elem('label') {
-            padding: 0 calc(fn.dim(--body --pad-x) - fn.foreign-dim(--header, --pad-x));
-        }
-
         @include iro.bem-elem('sidebar') {
-            grid-area: sidebar;
+            grid-area:    sidebar;
+            padding:      fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
+            border-right: 1px solid fn.color(--inner-border);
         }
 
         @include iro.bem-elem('body') {
@@ -108,5 +118,15 @@
             justify-content: flex-end;
             padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
         }
+
+        @include iro.bem-modifier('flat') {
+            @include iro.bem-elem('header') {
+                border-bottom: 0;
+            }
+
+            @include iro.bem-elem('body') {
+                padding-top: 0;
+            }
+        }
     }
 }