9 files changed, 635 insertions, 47 deletions

diff --git a/src/_general.scss b/src/_general.scss
new file mode 100644
index 0000000..82b9467
--- /dev/null
+++ b/src/_general.scss
@@ -0,0 +1,82 @@
+@use 'iro-sass/src/index' as iro;
+@use 'mixins/typography';
+@use 'vars';
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md)));
+
+    margin:           0;
+    padding:          0;
+    background-color: iro.props-get(--colors --bg);
+    color:            iro.props-get(--colors --fg);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @include typography.set-font(vars.$font--main, (size: iro.props-get(--dims --font-size --md), weight: 400));
+
+    margin: 0;
+}
+
+p {
+    margin-top:    iro.props-get(--dims --paragraph --margin-top);
+    margin-bottom: 0;
+
+    &:empty {
+        display: none;
+    }
+}
+
+ul,
+ol {
+    margin:       iro.props-get(--dims --paragraph --margin-top) 0 0;
+    padding-left: iro.props-get(--dims --list --indent);
+}
+
+:focus {
+    outline: 0;
+}
+
+:link,
+:visited {
+    color:           currentColor;
+    text-decoration: none;
+}
+
+button {
+    box-sizing:       content-box;
+    margin:           0;
+    padding:          0;
+    border:           0;
+    background-color: transparent;
+    color:            currentColor;
+    font:             inherit;
+    letter-spacing:   inherit;
+    text-align:       left;
+    text-transform:   inherit;
+    appearance:       none;
+
+    &::-moz-focus-inner {
+        border: 0;
+    }
+}
+
+::selection {
+    background: iro.props-get(--colors --selection --bg);
+    color:      iro.props-get(--colors --selection --fg);
+}
+
+img {
+    &::selection {
+        background: iro.props-get(--colors --selection --bg-img);
+    }
+}
diff --git a/src/_vars.scss b/src/_vars.scss
index 5a6c1d0..d2bdf38 100644
--- a/src/_vars.scss
+++ b/src/_vars.scss
@@ -1,13 +1,14 @@
 @use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
 
 iro.$vars-root-size: 16px;
 
-$breakpoints: (
+media.$breakpoints: (
     md: 40rem,
     sm: 28rem
 );
 
-$unit-intervals: (
+media.$unit-intervals: (
     'px':  1,
     'em':  .01,
     'rem': .01,
@@ -22,45 +23,15 @@ $font--main: (
 );
 
 $font--headline: (
-    family:         ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
-    line-height:    1.2,
-    weight:         700,
+    family:      ('IBM Plex Sans', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
+    line-height: 1.2,
+    weight:      700,
 );
 
 $line-height: map-get($font--main, line-height);
 
 //
 
-$theme-light: (
-    --gray1:  hsl(210, 0%, 100%), // 1.11
-    --gray2:  hsl(210, 0%, 98%), // 1.07
-    --gray3:  hsl(210, 0%, 95%), // 1
-    --gray4:  hsl(210, 0%, 90%), // 1.11
-    --gray5:  hsl(210, 0%, 87%), // 1.2
-    --gray6:  hsl(210, 0%, 78%), // 1.51
-    --gray7:  hsl(210, 0%, 69%), // 1.93
-    --gray8:  hsl(210, 0%, 55%), // 3
-    --gray9:  hsl(210, 0%, 38%), // 5.53
-    --gray10: hsl(210, 0%, 19%), // 11.78
-    --gray11: hsl(210, 0%, 0%), // 18.75 
-);
-
-$theme-lighter: (
-    --gray1:  hsl(210, 0%, 100%), // 1
-    --gray2:  hsl(210, 0%, 100%), // 1
-    --gray3:  hsl(210, 0%, 100%), // 1
-    --gray4:  hsl(210, 0%, 95%), // 1.11
-    --gray5:  hsl(210, 0%, 92%), // 1.19
-    --gray6:  hsl(210, 0%, 82%), // 1.52
-    --gray7:  hsl(210, 0%, 73%), // 1.94
-    --gray8:  hsl(210, 0%, 58%), // 3.03
-    --gray9:  hsl(210, 0%, 41%), // 5.48
-    --gray10: hsl(210, 0%, 22%), // 11.72
-    --gray11: hsl(210, 0%, 0%), // 21
-);
-
-//
-
 @include iro.fn-execute {
     $primary-accent-base: hsl(222, 49.8%, 52.4%);
     $error-accent-base:   hsl(352, 49.8%, 52.4%);
@@ -119,6 +90,18 @@ $theme-lighter: (
         ),
         
         --colors: (
+            --gray1:  hsl(210, 0%, 100%), // 1.11
+            --gray2:  hsl(210, 0%, 98%),  // 1.07
+            --gray3:  hsl(210, 0%, 95%),  // 1
+            --gray4:  hsl(210, 0%, 90%),  // 1.11
+            --gray5:  hsl(210, 0%, 87%),  // 1.2
+            --gray6:  hsl(210, 0%, 78%),  // 1.51
+            --gray7:  hsl(210, 0%, 69%),  // 1.93
+            --gray8:  hsl(210, 0%, 55%),  // 3
+            --gray9:  hsl(210, 0%, 38%),  // 5.53
+            --gray10: hsl(210, 0%, 19%),  // 11.78
+            --gray11: hsl(210, 0%, 0%),   // 18.75
+
             --bg-hi2: iro.props-get(--colors --gray1, null), // Lightest background
             --bg-hi:  iro.props-get(--colors --gray2, null), // Lighter background
             --bg:     iro.props-get(--colors --gray3, null), // Background
@@ -183,18 +166,44 @@ $theme-lighter: (
             ),
         ),
     ));
+
+    @include iro.props-store((
+        --colors: (
+            --gray1:  hsl(210, 0%, 100%), // 1
+            --gray2:  hsl(210, 0%, 100%), // 1
+            --gray3:  hsl(210, 0%, 100%), // 1
+            --gray4:  hsl(210, 0%, 95%),  // 1.11
+            --gray5:  hsl(210, 0%, 92%),  // 1.19
+            --gray6:  hsl(210, 0%, 82%),  // 1.52
+            --gray7:  hsl(210, 0%, 73%),  // 1.94
+            --gray8:  hsl(210, 0%, 58%),  // 3.03
+            --gray9:  hsl(210, 0%, 41%),  // 5.48
+            --gray10: hsl(210, 0%, 22%),  // 11.72
+            --gray11: hsl(210, 0%, 0%),   // 21
+        )
+    ), 'light-raised');
 }
 
 //
 
 @include iro.fn-execute {
-    @include iro.props-store((), 'dark');
+    @include iro.fn-execute {
+        @include iro.props-store((
+            --colors: ()
+        ), 'dark');
+    }
+    
+    @include iro.fn-execute {
+        @include iro.props-store((
+            --colors: ()
+        ), 'dark-raised');
+    }
 }
 
 //
 
-@each $breakpoint in map-keys($breakpoints) {
-    @include media('<=#{$breakpoint}') {
+@each $breakpoint in map-keys(media.$breakpoints) {
+    @include media.media('<=#{$breakpoint}') {
         @include iro.props-store((
             --colors: ()
         ), $breakpoint);
diff --git a/src/index.scss b/src/index.scss
index dc71caa..292785d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,19 +1,48 @@
-@use 'iro-sass/src/props';
-
-@import 'include-media/dist/include-media';
+@use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
 
 @import 'vars';
+@import 'general';
+
+@import 'layouts/container';
+
+@import 'objects/heading';
+@import 'objects/rule';
 
 :root {
-    @include props.assign;
+    @include iro.props-assign;
 
-    @each $breakpoint in map-keys($breakpoints) {
-        @include media('<=#{$breakpoint}') {
-            @include props.assign($breakpoint);
+    @each $breakpoint in map-keys(media.$breakpoints) {
+        @include media.media('<=#{$breakpoint}') {
+            @include iro.props-assign($breakpoint);
         }
     }
+}
+
+@include iro.bem-theme('grayscale') {
+    @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent);
+}
+
+@include iro.bem-theme('raised') {
+    @include iro.props-assign('light-raised');
 
-    @media (prefers-color-scheme: dark) {
-        @include props.assign('dark');
+    @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
+        @include iro.props-assign($root: --colors --grayscale-accent, $prefix: --colors --accent);
     }
 }
+
+/*@media (prefers-color-scheme: dark) {
+    @include iro.props-assign('dark');
+
+    @include iro.bem-theme('grayscale') {
+        @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
+    }
+
+    @include iro.bem-theme('raised') {
+        @include iro.props-assign('dark-raised');
+    
+        @include iro.bem-multi('at-theme' 'grayscale', 'theme' 'grayscale') {
+            @include iro.props-assign('dark', $root: --colors --grayscale-accent, $prefix: --colors --accent);
+        }
+    }
+}*/
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
new file mode 100644
index 0000000..f6b6b03
--- /dev/null
+++ b/src/layouts/_card.scss
@@ -0,0 +1,38 @@
+@include namespace('card') {
+    @include store((
+        --dims: (
+            --pad-x: iro-px-to-rem(11px),
+            --pad-y: iro-px-to-rem(8px),
+            --lg: (
+                --pad-x: iro-px-to-rem(14px),
+                --pad-y: iro-px-to-rem(11px),
+            )
+        )
+    ));
+
+    @include layout(namespace()) {
+        display:     flex;
+        align-items: center;
+        padding:     prop(--dims --pad-y) prop(--dims --pad-x);
+        gap:         prop(--dims --pad-x);
+        line-height: 1.4;
+
+        @include modifier('lg') {
+            padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x);
+            gap:     prop(--dims --lg --pad-x);
+        }
+
+        @include modifier('flush') {
+            padding: 0;
+        }
+
+        @include element('block') {
+            flex: 0 0 auto;
+
+            @include modifier('main') {
+                flex-shrink: 1;
+                width:       100%;
+            }
+        }
+    }
+}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
new file mode 100644
index 0000000..efe5203
--- /dev/null
+++ b/src/layouts/_container.scss
@@ -0,0 +1,91 @@
+@use 'iro-sass/src/index' as iro;
+@use 'include-media/dist/include-media' as media;
+
+@include iro.props-namespace('container') {
+    @include iro.props-store((
+        --dims: (
+            --content-width:     iro.fn-px-to-rem(700px),
+            --sm-content-width:  iro.fn-px-to-rem(360px),
+            --padding-x:         3rem,
+            --padding-y:         3rem,
+            --in-page-spacing-y: iro.props-get(--dims --spacing --y --xl, $global: true),
+        )
+    ));
+
+    @include iro.bem-layout(iro.props-namespace()) {
+        overflow: hidden;
+
+        @include iro.bem-elem('inner') {
+            margin-top:    calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
+            margin-bottom: calc(-1 * iro.props-get(--dims --spacing --y --xl, $global: true));
+
+            &::before,
+            &::after {
+                content: '';
+                display: block;
+                width:   0;
+                height:  0;
+            }
+
+            &::before {
+                margin-bottom: iro.props-get(--dims --spacing --y --xl, $global: true);
+            }
+
+            &::after {
+                margin-top: iro.props-get(--dims --spacing --y --xl, $global: true);
+            }
+        }
+
+        @include iro.bem-modifier('pad-x') {
+            padding-right: iro.props-get(--dims --padding-x);
+            padding-left:  iro.props-get(--dims --padding-x);
+        }
+
+        @include iro.bem-modifier('pad-y') {
+            padding-top:    iro.props-get(--dims --padding-y);
+            padding-bottom: iro.props-get(--dims --padding-y);
+        }
+
+        @include iro.bem-modifier('narrow') {
+            max-width:    iro.props-get(--dims --content-width);
+            margin-right: auto;
+            margin-left:  auto;
+
+            @each $breakpoint in map-keys(media.$breakpoints) {
+                @include media.media('<=#{$breakpoint}') {
+                    @include iro.bem-suffix('#{$breakpoint}-down') {
+                        max-width:    iro.props-get(--dims --content-width);
+                        margin-right: auto;
+                        margin-left:  auto;
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('sm-narrow') {
+            max-width:    iro.props-get(--dims --sm-content-width);
+            margin-right: auto;
+            margin-left:  auto;
+
+            @each $breakpoint in map-keys(media.$breakpoints) {
+                @include media.media('<=#{$breakpoint}') {
+                    @include iro.bem-suffix('#{$breakpoint}-down') {
+                        max-width:    iro.props-get(--dims --sm-content-width);
+                        margin-right: auto;
+                        margin-left:  auto;
+                    }
+                }
+            }
+        }
+
+        @include iro.bem-modifier('themed') {
+            background-color: iro.props-get(--colors --bg, $global: true);
+            color:            iro.props-get(--colors --fg, $global: true);
+        }
+
+        @include iro.bem-modifier('in-page') {
+            margin-top:    iro.props-get(--dims --in-page-spacing-y);
+            margin-bottom: iro.props-get(--dims --in-page-spacing-y);
+        }
+    }
+}
diff --git a/src/mixins/_grid.scss b/src/mixins/_grid.scss
new file mode 100644
index 0000000..e0a73d9
--- /dev/null
+++ b/src/mixins/_grid.scss
@@ -0,0 +1,88 @@
+$context-id: 'grid' !default;
+
+@include iro-context-stack-create($grid-context-id);
+
+@mixin native-grid {
+    @supports (display: grid) {
+        @content;
+    }
+}
+
+@mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) {
+    display:         flex;
+    flex-flow:       row wrap;
+    align-items:     stretch;
+    justify-content: flex-start;
+    margin:          (-.5 * $v-spacing) (-.5 * $h-spacing);
+
+    @if $reverse {
+        flex-direction: row-reverse;
+    }
+
+    @include iro-context-push($grid-context-id, 'grid', (
+        --h-spacing: $h-spacing,
+        --v-spacing: $v-spacing,
+        --columns:   $columns,
+        --reverse:   $reverse
+    ));
+
+    @content;
+
+    @include iro-context-pop($grid-context-id);
+}
+
+@mixin grid-col {
+    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
+
+    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
+    $v-spacing: map-get($data, --v-spacing);
+    $h-spacing: map-get($data, --h-spacing);
+
+    box-sizing: border-box;
+    flex:       0 0 auto;
+    margin:     .5 * $v-spacing .5 * $h-spacing;
+
+    @include iro-context-push($grid-context-id, 'grid__col');
+
+    @content;
+
+    @include iro-context-pop($grid-context-id);
+}
+
+@mixin grid-col-span($i) {
+    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
+
+    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
+    $columns:   map-get($data, --columns);
+    $h-spacing: map-get($data, --h-spacing);
+
+    @if $h-spacing != 0 {
+        width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing});
+        //                                                ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
+    } @else {
+        width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
+    }
+}
+
+@mixin grid-col-shift($i) {
+    @include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
+
+    $data:      nth(iro-context-get($grid-context-id, 'grid'), 2);
+    $columns:   map-get($data, --columns);
+    $h-spacing: map-get($data, --h-spacing);
+    $reverse:   map-get($data, --reverse);
+
+    $prop: if($reverse, margin-right, margin-left);
+
+    @if $i == 0 {
+        #{$prop}: 0;
+    } @else {
+        @if $h-spacing != 0 {
+            #{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2});
+            //                                                   ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
+        } @else {
+            #{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
+            //                      ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
+        }
+    }
+}
diff --git a/src/mixins/_typography.scss b/src/mixins/_typography.scss
new file mode 100644
index 0000000..31e39f0
--- /dev/null
+++ b/src/mixins/_typography.scss
@@ -0,0 +1,63 @@
+@function set-font($basis, $values: ()) {
+    $font: map-merge($basis, $values);
+
+    $map: (font-family: map-get($font, 'family'));
+
+    @if (map-has-key($font, 'size')) {
+        $map: map-merge(
+            $map, (
+                font-size: map-get($font, 'size')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'weight')) {
+        $map: map-merge(
+            $map, (
+                font-weight: map-get($font, 'weight')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'style')) {
+        $map: map-merge(
+            $map, (
+                font-style: map-get($font, 'style')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'line-height')) {
+        $map: map-merge(
+            $map, (
+                line-height: map-get($font, 'line-height')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'transform')) {
+        $map: map-merge(
+            $map, (
+                text-transform: map-get($font, 'transform')
+            )
+        );
+    }
+
+    @if (map-has-key($font, 'variant-alternates')) {
+        $map: map-merge(
+            $map, (
+                font-variant-alternates: map-get($font, 'variant-alternates')
+            )
+        );
+    }
+
+    @return $map;
+}
+
+@mixin set-font($basis, $values: ()) {
+    $values: set-font($basis, $values);
+
+    @each $prop, $value in $values {
+        #{$prop}: $value;
+    }
+}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
new file mode 100644
index 0000000..a0ce052
--- /dev/null
+++ b/src/objects/_heading.scss
@@ -0,0 +1,68 @@
+@use 'iro-sass/src/index' as iro;
+@use '../vars';
+@use '../mixins/typography';
+
+@include iro.props-namespace('heading') {
+    @include iro.props-store((
+        --dims: (
+            --in-page-margin: (
+                --top:         iro.props-get(--dims --spacing --y --lg, $global: true),
+                --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true),
+                --bottom:      iro.props-get(--dims --spacing --y --sm, $global: true),
+            ),
+        ),
+        --colors: (
+            --light:  iro.props-get(--colors --fg-hi, $global: true),
+            --strong: iro.props-get(--colors --fg-lo, $global: true),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        @include typography.set-font(vars.$font--headline);
+
+        display:       block;
+        margin-top:    iro.props-get(--dims --in-page-margin --top);
+        margin-bottom: 0;
+
+        & + & {
+            margin-top: iro.props-get(--dims --in-page-margin --top-sibling);
+        }
+
+        @include iro.bem-modifier('xxl') {
+            color:     iro.props-get(--colors --strong);
+            font-size: iro.props-get(--dims --font-size --xxxl, $global: true);
+        }
+
+        @include iro.bem-modifier('xl') {
+            color:     iro.props-get(--colors --strong);
+            font-size: iro.props-get(--dims --font-size --xxl, $global: true);
+        }
+
+        @include iro.bem-modifier('lg') {
+            color:     iro.props-get(--colors --strong);
+            font-size: iro.props-get(--dims --font-size --xl, $global: true);
+        }
+
+        @include iro.bem-modifier('md') {
+            color:     iro.props-get(--colors --strong);
+            font-size: iro.props-get(--dims --font-size --lg, $global: true);
+        }
+
+        @include iro.bem-modifier('sm') {
+            @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
+
+            color:       iro.props-get(--colors --strong);
+            font-size:   iro.props-get(--dims --font-size --md, $global: true);
+            font-weight: 500;
+        }
+
+        @include iro.bem-modifier('xs') {
+            @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height)));
+
+            color:          iro.props-get(--colors --light);
+            font-size:      iro.props-get(--dims --font-size --xs, $global: true);
+            font-weight:    500;
+            text-transform: uppercase;
+        }
+    }
+}
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;
+                }
+            }
+        }
+    }
+}