1 files changed, 120 insertions, 0 deletions

diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
new file mode 100644
index 0000000..74987da
--- /dev/null
+++ b/src/objects/_rule.scss
@@ -0,0 +1,120 @@
+@use 'iro-sass/src/index' as iro;
+@use '../vars';
+@use '../mixins/typography';
+
+@include iro.props-namespace('rule') {
+    @include iro.props-store((
+        --dims: (
+            --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true),
+    
+            --strong: (
+                --border-width:    iro.props-get(--dims --border-width --thick, $global: true),
+                --label-font-size: iro.props-get(--dims --font-size --md, $global: true),
+            ),
+            --medium: (
+                --border-width:    iro.props-get(--dims --border-width --medium, $global: true),
+                --label-font-size: iro.props-get(--dims --font-size --sm, $global: true),
+            ),
+            --faint: (
+                --border-width:    iro.props-get(--dims --border-width --thin, $global: true),
+                --label-font-size: iro.props-get(--dims --font-size --xs, $global: true),
+            ),
+        ),
+        --colors: (
+            --strong: (
+                --bg:    iro.props-get(--colors --fg, $global: true),
+                --label: iro.props-get(--colors --fg, $global: true),
+            ),
+            --medium: (
+                --bg:    iro.props-get(--colors --obj, $global: true),
+                --label: iro.props-get(--colors --fg-hi, $global: true),
+            ),
+            --faint: (
+                --bg:    iro.props-get(--colors --obj, $global: true),
+                --label: iro.props-get(--colors --fg-hi2, $global: true),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          block;
+        height:           iro.props-get(--dims --strong --border-width);
+        margin-top:       iro.props-get(--dims --margin-y);
+        margin-bottom:    iro.props-get(--dims --margin-y);
+        background-color: iro.props-get(--colors --strong --bg);
+
+        @include iro.bem-modifier('medium') {
+            height:           iro.props-get(--dims --medium --border-width);
+            background-color: iro.props-get(--colors --medium --bg);
+        }
+
+        @include iro.bem-modifier('faint') {
+            height:           iro.props-get(--dims --faint --border-width);
+            background-color: iro.props-get(--colors --faint --bg);
+        }
+
+        @include iro.bem-modifier('labelled') {
+            display:          flex;
+            flex-direction:   row;
+            align-items:      center;
+            height:           auto;
+            border-radius:    0;
+            background-color: transparent;
+
+            &::before,
+            &::after {
+                content:          '';
+                display:          block;
+                flex:             1 1 auto;
+                width:            100%;
+                height:           3px;
+                background-color: iro.props-get(--colors --strong --bg);
+            }
+
+            &::before {
+                margin-right: 1em;
+            }
+
+            &::after {
+                margin-left: 1em;
+            }
+
+            @include iro.bem-elem('label') {
+                flex:           0 0 auto;
+                color:          iro.props-get(--colors --strong --label);
+                font-size:      iro.props-get(--dims --strong --label-font-size);
+                font-weight:    700;
+                letter-spacing: .5px;
+                text-transform: uppercase;
+            }
+
+            @include iro.bem-modifier('medium') {
+                &::before,
+                &::after {
+                    height:           2px;
+                    background-color: iro.props-get(--colors --medium --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color:       iro.props-get(--colors --medium --label);
+                    font-size:   iro.props-get(--dims --medium --label-font-size);
+                    font-weight: 500;
+                }
+            }
+
+            @include iro.bem-modifier('faint') {
+                &::before,
+                &::after {
+                    height:           1px;
+                    background-color: iro.props-get(--colors --faint --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color:       iro.props-get(--colors --faint --label);
+                    font-size:   iro.props-get(--dims --faint --label-font-size);
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+}