1 files changed, 69 insertions, 0 deletions

diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
new file mode 100644
index 0000000..e3c786d
--- /dev/null
+++ b/src/objects/_dialog.scss
@@ -0,0 +1,69 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'dialog.vars';
+@use 'dialog.vars' as vars;
+
+@use 'backdrop.vars' as backdrop;
+@use 'divider.vars' as divider;
+
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+
+        @include bem.object('dialog') {
+                display:          none;
+                box-sizing:       border-box;
+                inline-size:      100%;
+                max-inline-size:  none;
+                block-size:       100%;
+                min-block-size:   0;
+                max-block-size:   none;
+                padding:          props.get(vars.$pad-b) props.get(vars.$pad-i);
+                margin:           0;
+                background-color: transparent;
+                border:           0;
+
+                &::backdrop {
+                        background-color: props.get(backdrop.$bg-color);
+                        backdrop-filter: blur(props.get(backdrop.$blur));
+                }
+
+                &[open],
+                &:popover-open {
+                        display:        flex;
+                        flex-direction: column;
+                }
+
+                @include bem.elem('content') {
+                        pointer-events:   auto;
+                        border-radius:    props.get(vars.$rounding);
+                        background-color: props.get(vars.$bg-color);
+                }
+
+                @include bem.elem('header') {
+                        display:     flex;
+                        align-items: center;
+                        padding:     props.get(vars.$body--pad-i) props.get(vars.$body--pad-i) 0;
+                }
+
+                @include bem.elem('divider') {
+                        margin-inline: props.get(vars.$body--pad-i);
+
+                        @include bem.next-elem('body') {
+                                padding-block-start: calc(.5 * props.get(vars.$body--pad-b) - props.get(divider.$margin-b));
+                        }
+                }
+
+                @include bem.elem('body') {
+                        padding: props.get(vars.$body--pad-b) props.get(vars.$body--pad-i);
+
+                        &::before {
+                                display:       block;
+                                margin-block:  -100em 100em;
+                                content:       '';
+                        }
+                }
+        }
+}