1 files changed, 231 insertions, 231 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4bd6a59..ebab339 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,270 +8,270 @@
 @use 'card.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('card') {
+        @include bem.object('card') {
-        position:         relative;
+                position:         relative;
-        display:          flex;
+                display:          flex;
-        flex-direction:   column;
+                flex-direction:   column;
-        background-color: props.get(vars.$bg-color);
+                background-color: props.get(vars.$bg-color);
-        border:           props.get(vars.$border-width) solid transparent;
+                border:           props.get(vars.$border-width) solid transparent;
-        border-color:     props.get(vars.$border-color);
+                border-color:     props.get(vars.$border-color);
-        border-radius:    props.get(vars.$rounding);
+                border-radius:    props.get(vars.$rounding);
-        transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
+                transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
-        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-            &:hover,
+                        &:hover,
-            &:active,
+                        &:active,
-            &:focus-visible {
+                        &:focus-visible {
-                transform:        translateY(props.get(vars.$hover--offset-b));
+                                background-color: props.get(vars.$hover--bg-color);
-                background-color: props.get(vars.$hover--bg-color);
+                                border-color:     props.get(vars.$hover--border-color);
-                border-color:     props.get(vars.$hover--border-color);
+                                box-shadow:       none;
-                box-shadow:       none;
+                                transform:        translateY(props.get(vars.$hover--offset-b));
-            }
+                        }
-            &:focus-visible {
+                        &:focus-visible {
-                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
-                transition:    transform .2s;
+                                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
+                                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                box-shadow:
-                box-shadow:
+                                        0 0 0
-                    0 0 0
+                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                        props.get(vars.$key-focus--outline-color);
-                    props.get(vars.$key-focus--outline-color);
+                                transition:    transform .2s;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('borderless') {
+                @include bem.modifier('borderless') {
-            border-color: props.get(vars.$bg-color);
+                        border-color: props.get(vars.$bg-color);
-        }
+                }
-        @include bem.modifier('shadow') {
+                @include bem.modifier('shadow') {
-            box-shadow:
+                        box-shadow:
-                props.get(vars.$shadow-x)
+                                props.get(vars.$shadow-x)
-                props.get(vars.$shadow-y)
+                                props.get(vars.$shadow-y)
-                props.get(vars.$shadow-blur)
+                                props.get(vars.$shadow-blur)
-                props.get(vars.$shadow-grow)
+                                props.get(vars.$shadow-grow)
-                props.get(vars.$shadow-color);
+                                props.get(vars.$shadow-color);
-            @include bem.modifier('quiet') {
+                        @include bem.modifier('quiet') {
-                @include bem.elem('image') {
+                                @include bem.elem('image') {
-                    box-shadow:
+                                        box-shadow:
-                        props.get(vars.$shadow-x)
+                                                props.get(vars.$shadow-x)
-                        props.get(vars.$shadow-y)
+                                                props.get(vars.$shadow-y)
-                        props.get(vars.$shadow-blur)
+                                                props.get(vars.$shadow-blur)
-                        props.get(vars.$shadow-grow)
+                                                props.get(vars.$shadow-grow)
-                        props.get(vars.$shadow-color);
+                                                props.get(vars.$shadow-color);
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.elem('avatar') {
+                @include bem.elem('avatar') {
-            margin-block-start:  props.get(vars.$pad-b);
+                        margin-block-start:  props.get(vars.$pad-b);
-            margin-inline-start: props.get(vars.$pad-i);
+                        margin-inline-start: props.get(vars.$pad-i);
-        }
+                }
-        @include bem.elem('image') {
+                @include bem.elem('image') {
-            position:      relative;
+                        position:      relative;
-            display:       block;
+                        display:       block;
-            flex:          0 0 auto;
+                        flex:          0 0 auto;
-            inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                        inline-size:   calc(100% + 2 * props.get(vars.$border-width));
-            margin:        calc(-1 * props.get(vars.$border-width));
+                        margin:        calc(-1 * props.get(vars.$border-width));
-            overflow:      hidden;
+                        overflow:      hidden;
-            object-fit:    cover;
+                        object-fit:    cover;
-            transition:    background-color .2s, transform .2s, opacity .2s;
+                        transition:    background-color .2s, transform .2s, opacity .2s;
-            &:first-child {
+                        &:first-child {
-                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-            }
+                        }
-            &:last-child {
+                        &:last-child {
-                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-            }
+                        }
-            @include bem.next-elem('avatar') {
+                        @include bem.next-elem('avatar') {
-                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
+                                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
-            }
+                        }
-        }
+                }
-        @include bem.elem('image-img') {
+                @include bem.elem('image-img') {
-            display:     block;
+                        display:     block;
-            inline-size: 100%;
+                        inline-size: 100%;
-            object-fit:  cover;
+                        object-fit:  cover;
-        }
+                }
-        @include bem.elem('image-overlay') {
+                @include bem.elem('image-overlay') {
-            position:        absolute;
+                        position:        absolute;
-            inset-block-end: 0;
+                        inset-block-end: 0;
-            inset-inline:    0;
+                        inset-inline:    0;
-            z-index:         5;
+                        z-index:         5;
-            padding-block:   props.get(vars.$image-overlay--pad-b);
+                        padding-block:   props.get(vars.$image-overlay--pad-b);
-            padding-inline:  props.get(vars.$image-overlay--pad-i);
+                        padding-inline:  props.get(vars.$image-overlay--pad-i);
-        }
+                }
-        @include bem.elem('body') {
+                @include bem.elem('body') {
-            flex:            1 0 auto;
+                        flex:            1 0 auto;
-            padding-block:   props.get(vars.$pad-b);
+                        padding-block:   props.get(vars.$pad-b);
-            padding-inline:  props.get(vars.$pad-i);
+                        padding-inline:  props.get(vars.$pad-i);
-            &::before {
+                        &::before {
-                display:       block;
+                                display:       block;
-                margin-block:  -100em 100em;
+                                margin-block:  -100em 100em;
-                content:       '';
+                                content:       '';
-            }
+                        }
-        }
+                }
-        @include bem.elem('content') {
+                @include bem.elem('content') {
-            margin-block-start: props.get(vars.$spacing);
+                        margin-block-start: props.get(vars.$spacing);
-        }
+                }
-        @include bem.elem('footer') {
+                @include bem.elem('footer') {
-            flex:               0 0 auto;
+                        flex:               0 0 auto;
-            padding-block:      0 props.get(vars.$pad-b);
+                        padding-block:      0 props.get(vars.$pad-b);
-            padding-inline:     props.get(vars.$pad-i);
+                        padding-inline:     props.get(vars.$pad-i);
-            margin-block-start: calc(-1 * props.get(vars.$pad-b));
+                        margin-block-start: calc(-1 * props.get(vars.$pad-b));
-            &::before {
+                        &::before {
-                display:          block;
+                                display:          block;
-                block-size:       props.get(vars.$divider-width);
+                                block-size:       props.get(vars.$divider-width);
-                margin-block:     props.get(vars.$spacing);
+                                margin-block:     props.get(vars.$spacing);
-                content:          '';
+                                content:          '';
-                background-color: props.get(vars.$divider-width);
+                                background-color: props.get(vars.$divider-width);
-            }
+                        }
-        }
+                }
-        @include bem.modifier('quiet') {
+                @include bem.modifier('quiet') {
-            margin-inline:    0;
+                        margin-inline:    0;
-            background-color: transparent;
+                        background-color: transparent;
-            border:           0;
+                        border:           0;
-            box-shadow:       none;
+                        box-shadow:       none;
-            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
+                                &:hover,
-                &:active,
+                                &:active,
-                &:focus-visible {
+                                &:focus-visible {
-                    transform:        none;
+                                        background-color: transparent;
-                    background-color: transparent;
+                                        transform:        none;
-                    @include bem.elem('image') {
+                                        @include bem.elem('image') {
-                        background-color: props.get(vars.$quiet--hover--image-color);
+                                                background-color: props.get(vars.$quiet--hover--image-color);
-                        opacity:          .75;
+                                                opacity:          .75;
-                        transform:        translateY(props.get(vars.$hover--offset-b));
+                                                transform:        translateY(props.get(vars.$hover--offset-b));
-                    }
+                                        }
-                }
+                                }
-                &:focus-visible {
+                                &:focus-visible {
-                    margin:     0;
+                                        margin:     0;
-                    outline:    none;
+                                        outline:    none;
-                    border:     0;
+                                        border:     0;
-                    box-shadow: none;
+                                        box-shadow: none;
-                    @include bem.elem('image') {
+                                        @include bem.elem('image') {
-                        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                                                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
-                        border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                                                outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                                                background-color: props.get(vars.$quiet--hover--image-color);
-                        background-color: props.get(vars.$quiet--hover--image-color);
+                                                border:           props.get(vars.$key-focus--border-offset) solid transparent;
-                        outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-                        box-shadow:
+                                                box-shadow:
-                            0
+                                                        0
-                            0
+                                                        0
-                            0
+                                                        0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$key-focus--outline-color);
+                                                        props.get(vars.$key-focus--outline-color);
-                        opacity:          1;
+                                                opacity:          1;
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-            @include bem.elem('image') {
+                        @include bem.elem('image') {
-                position:         relative;
+                                position:         relative;
-                background-color: props.get(vars.$quiet--image-color);
+                                background-color: props.get(vars.$quiet--image-color);
-                background-clip:  padding-box;
+                                background-clip:  padding-box;
-                border-radius:    props.get(vars.$rounding);
+                                border-radius:    props.get(vars.$rounding);
-            }
+                        }
-            @include bem.elem('body') {
+                        @include bem.elem('body') {
-                padding:             0;
+                                padding:             0;
-                padding-block-start: props.get(vars.$spacing);
+                                padding-block-start: props.get(vars.$spacing);
-            }
+                        }
-            @include bem.elem('footer') {
+                        @include bem.elem('footer') {
-                padding-inline: 0;
+                                padding-inline: 0;
-            }
+                        }
-        }
+                }
-        @include bem.modifier('thumbnail') {
+                @include bem.modifier('thumbnail') {
-            @include bem.elem('image') {
+                        @include bem.elem('image') {
-                border-radius: props.get(vars.$rounding);
+                                border-radius: props.get(vars.$rounding);
-            }
+                        }
-            @include bem.elem('body') {
+                        @include bem.elem('body') {
-                position:                absolute;
+                                position:                absolute;
-                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                                inset-block-end:         calc(-1 * props.get(vars.$border-width));
-                inset-inline:            calc(-1 * props.get(vars.$border-width));
+                                inset-inline:            calc(-1 * props.get(vars.$border-width));
-                z-index:                 10;
+                                z-index:                 10;
-                visibility:              hidden;
+                                visibility:              hidden;
-                background-color:        props.get(vars.$hover--bg-color);
+                                background-color:        props.get(vars.$hover--bg-color);
-                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+                                border-color:            transparent;
-                border-color:            transparent;
+                                border-style:            solid;
-                border-style:            solid;
+                                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
-                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                opacity:                 0;
+                                opacity:                 0;
-                transition:
+                                transition:
-                    border-color .2s ease,
+                                        border-color .2s ease,
-                    opacity .2s ease,
+                                        opacity .2s ease,
-                    visibility 0s .2s linear;
+                                        visibility 0s .2s linear;
-            }
+                        }
-            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
+                                &:hover,
-                &:active,
+                                &:active,
-                &:focus-visible {
+                                &:focus-visible {
-                    @include bem.elem('body') {
+                                        @include bem.elem('body') {
-                        border-color: props.get(vars.$hover--border-color);
+                                                visibility:   visible;
-                        visibility:   visible;
+                                                border-color: props.get(vars.$hover--border-color);
-                        opacity:      1;
+                                                opacity:      1;
-                        transition:
+                                                transition:
-                            border-color .2s ease,
+                                                        border-color .2s ease,
-                            opacity .2s ease,
+                                                        opacity .2s ease,
-                            visibility .2s linear;
+                                                        visibility .2s linear;
-                    }
+                                        }
-                }
+                                }
-            }
+                        }
-        }
+                }
-        @include bem.modifier('horizontal') {
+                @include bem.modifier('horizontal') {
-            flex-direction: row;
+                        flex-direction: row;
-            align-items:    center;
+                        align-items:    center;
-            @include bem.elem('image') {
+                        @include bem.elem('image') {
-                align-self:  stretch;
+                                align-self:  stretch;
-                inline-size: auto;
+                                inline-size: auto;
-                &:first-child {
+                                &:first-child {
-                    border-start-end-radius:   0;
+                                        border-start-end-radius:   0;
-                    border-end-start-radius:   props.get(vars.$rounding);
+                                        border-end-start-radius:   props.get(vars.$rounding);
-                }
+                                }
    
-                &:last-child {
+                                &:last-child {
-                    border-start-end-radius: props.get(vars.$rounding);
+                                        border-start-end-radius: props.get(vars.$rounding);
-                    border-end-start-radius: 0;
+                                        border-end-start-radius: 0;
-                }
+                                }
-            }
+                        }
-            @include bem.elem('body') {
+                        @include bem.elem('body') {
-                flex: 0 0 auto;
+                                flex: 0 0 auto;
-                @include bem.modifier('main') {
+                                @include bem.modifier('main') {
-                    flex-shrink:     1;
+                                        flex-shrink:     1;
-                    inline-size:     100%;
+                                        inline-size:     100%;
-                    min-inline-size: 0;
+                                        min-inline-size: 0;
-                }
+                                }
-            }
+                        }
-        }
+                }
-    }
+        }
 }

diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 4bd6a59..ebab339 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss
@@ -8,270 +8,270 @@
8	@use 'card.vars' as vars;	8	@use 'card.vars' as vars;
9		9
10	@mixin styles {	10	@mixin styles {
11	@include materialize-at-root(meta.module-variables('vars'));	11	@include materialize-at-root(meta.module-variables('vars'));
12		12
13	@include bem.object('card') {	13	@include bem.object('card') {
14	position: relative;	14	position: relative;
15	display: flex;	15	display: flex;
16	flex-direction: column;	16	flex-direction: column;
17	background-color: props.get(vars.$bg-color);	17	background-color: props.get(vars.$bg-color);
18	border: props.get(vars.$border-width) solid transparent;	18	border: props.get(vars.$border-width) solid transparent;
19	border-color: props.get(vars.$border-color);	19	border-color: props.get(vars.$border-color);
20	border-radius: props.get(vars.$rounding);	20	border-radius: props.get(vars.$rounding);
21	transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;	21	transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
22		22
23	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {	23	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
24	&:hover,	24	&:hover,
25	&:active,	25	&:active,
26	&:focus-visible {	26	&:focus-visible {
27	transform: translateY(props.get(vars.$hover--offset-b));	27	background-color: props.get(vars.$hover--bg-color);
28	background-color: props.get(vars.$hover--bg-color);	28	border-color: props.get(vars.$hover--border-color);
29	border-color: props.get(vars.$hover--border-color);	29	box-shadow: none;
30	box-shadow: none;	30	transform: translateY(props.get(vars.$hover--offset-b));
31	}	31	}
32		32
33	&:focus-visible {	33	&:focus-visible {
34	margin: calc(-1 * props.get(vars.$key-focus--border-width));	34	margin: calc(-1 * props.get(vars.$key-focus--border-width));
35	transition: transform .2s;	35	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
36	border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;	36	border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
37	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));	37	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
38	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);	38	box-shadow:
39	box-shadow:	39	0 0 0
40	0 0 0	40	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
41	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))	41	props.get(vars.$key-focus--outline-color);
42	props.get(vars.$key-focus--outline-color);	42	transition: transform .2s;
43	}	43	}
44	}	44	}
45		45
46	@include bem.modifier('borderless') {	46	@include bem.modifier('borderless') {
47	border-color: props.get(vars.$bg-color);	47	border-color: props.get(vars.$bg-color);
48	}	48	}
49		49
50	@include bem.modifier('shadow') {	50	@include bem.modifier('shadow') {
51	box-shadow:	51	box-shadow:
52	props.get(vars.$shadow-x)	52	props.get(vars.$shadow-x)
53	props.get(vars.$shadow-y)	53	props.get(vars.$shadow-y)
54	props.get(vars.$shadow-blur)	54	props.get(vars.$shadow-blur)
55	props.get(vars.$shadow-grow)	55	props.get(vars.$shadow-grow)
56	props.get(vars.$shadow-color);	56	props.get(vars.$shadow-color);
57		57
58	@include bem.modifier('quiet') {	58	@include bem.modifier('quiet') {
59	@include bem.elem('image') {	59	@include bem.elem('image') {
60	box-shadow:	60	box-shadow:
61	props.get(vars.$shadow-x)	61	props.get(vars.$shadow-x)
62	props.get(vars.$shadow-y)	62	props.get(vars.$shadow-y)
63	props.get(vars.$shadow-blur)	63	props.get(vars.$shadow-blur)
64	props.get(vars.$shadow-grow)	64	props.get(vars.$shadow-grow)
65	props.get(vars.$shadow-color);	65	props.get(vars.$shadow-color);
66	}	66	}
67	}	67	}
68	}	68	}
69		69
70	@include bem.elem('avatar') {	70	@include bem.elem('avatar') {
71	margin-block-start: props.get(vars.$pad-b);	71	margin-block-start: props.get(vars.$pad-b);
72	margin-inline-start: props.get(vars.$pad-i);	72	margin-inline-start: props.get(vars.$pad-i);
73	}	73	}
74		74
75	@include bem.elem('image') {	75	@include bem.elem('image') {
76	position: relative;	76	position: relative;
77	display: block;	77	display: block;
78	flex: 0 0 auto;	78	flex: 0 0 auto;
79	inline-size: calc(100% + 2 * props.get(vars.$border-width));	79	inline-size: calc(100% + 2 * props.get(vars.$border-width));
80	margin: calc(-1 * props.get(vars.$border-width));	80	margin: calc(-1 * props.get(vars.$border-width));
81	overflow: hidden;	81	overflow: hidden;
82	object-fit: cover;	82	object-fit: cover;
83	transition: background-color .2s, transform .2s, opacity .2s;	83	transition: background-color .2s, transform .2s, opacity .2s;
84		84
85	&:first-child {	85	&:first-child {
86	border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));	86	border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
87	border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));	87	border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
88	}	88	}
89		89
90	&:last-child {	90	&:last-child {
91	border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));	91	border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
92	border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));	92	border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
93	}	93	}
94		94
95	@include bem.next-elem('avatar') {	95	@include bem.next-elem('avatar') {
96	margin-block-start: calc(-.7 * props.get(avatar.$size--xl));	96	margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
97	}	97	}
98	}	98	}
99		99
100	@include bem.elem('image-img') {	100	@include bem.elem('image-img') {
101	display: block;	101	display: block;
102	inline-size: 100%;	102	inline-size: 100%;
103	object-fit: cover;	103	object-fit: cover;
104	}	104	}
105		105
106	@include bem.elem('image-overlay') {	106	@include bem.elem('image-overlay') {
107	position: absolute;	107	position: absolute;
108	inset-block-end: 0;	108	inset-block-end: 0;
109	inset-inline: 0;	109	inset-inline: 0;
110	z-index: 5;	110	z-index: 5;
111	padding-block: props.get(vars.$image-overlay--pad-b);	111	padding-block: props.get(vars.$image-overlay--pad-b);
112	padding-inline: props.get(vars.$image-overlay--pad-i);	112	padding-inline: props.get(vars.$image-overlay--pad-i);
113	}	113	}
114		114
115	@include bem.elem('body') {	115	@include bem.elem('body') {
116	flex: 1 0 auto;	116	flex: 1 0 auto;
117	padding-block: props.get(vars.$pad-b);	117	padding-block: props.get(vars.$pad-b);
118	padding-inline: props.get(vars.$pad-i);	118	padding-inline: props.get(vars.$pad-i);
119		119
120	&::before {	120	&::before {
121	display: block;	121	display: block;
122	margin-block: -100em 100em;	122	margin-block: -100em 100em;
123	content: '';	123	content: '';
124	}	124	}
125	}	125	}
126		126
127	@include bem.elem('content') {	127	@include bem.elem('content') {
128	margin-block-start: props.get(vars.$spacing);	128	margin-block-start: props.get(vars.$spacing);
129	}	129	}
130		130
131	@include bem.elem('footer') {	131	@include bem.elem('footer') {
132	flex: 0 0 auto;	132	flex: 0 0 auto;
133	padding-block: 0 props.get(vars.$pad-b);	133	padding-block: 0 props.get(vars.$pad-b);
134	padding-inline: props.get(vars.$pad-i);	134	padding-inline: props.get(vars.$pad-i);
135	margin-block-start: calc(-1 * props.get(vars.$pad-b));	135	margin-block-start: calc(-1 * props.get(vars.$pad-b));
136		136
137	&::before {	137	&::before {
138	display: block;	138	display: block;
139	block-size: props.get(vars.$divider-width);	139	block-size: props.get(vars.$divider-width);
140	margin-block: props.get(vars.$spacing);	140	margin-block: props.get(vars.$spacing);
141	content: '';	141	content: '';
142	background-color: props.get(vars.$divider-width);	142	background-color: props.get(vars.$divider-width);
143	}	143	}
144	}	144	}
145		145
146	@include bem.modifier('quiet') {	146	@include bem.modifier('quiet') {
147	margin-inline: 0;	147	margin-inline: 0;
148	background-color: transparent;	148	background-color: transparent;
149	border: 0;	149	border: 0;
150	box-shadow: none;	150	box-shadow: none;
151		151
152	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {	152	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
153	&:hover,	153	&:hover,
154	&:active,	154	&:active,
155	&:focus-visible {	155	&:focus-visible {
156	transform: none;	156	background-color: transparent;
157	background-color: transparent;	157	transform: none;
158		158
159	@include bem.elem('image') {	159	@include bem.elem('image') {
160	background-color: props.get(vars.$quiet--hover--image-color);	160	background-color: props.get(vars.$quiet--hover--image-color);
161	opacity: .75;	161	opacity: .75;
162	transform: translateY(props.get(vars.$hover--offset-b));	162	transform: translateY(props.get(vars.$hover--offset-b));
163	}	163	}
164	}	164	}
165		165
166	&:focus-visible {	166	&:focus-visible {
167	margin: 0;	167	margin: 0;
168	outline: none;	168	outline: none;
169	border: 0;	169	border: 0;
170	box-shadow: none;	170	box-shadow: none;
171		171
172	@include bem.elem('image') {	172	@include bem.elem('image') {
173	margin: calc(-1 * props.get(vars.$key-focus--border-width));	173	margin: calc(-1 * props.get(vars.$key-focus--border-width));
174	border: props.get(vars.$key-focus--border-offset) solid transparent;	174	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
175	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));	175	background-color: props.get(vars.$quiet--hover--image-color);
176	background-color: props.get(vars.$quiet--hover--image-color);	176	border: props.get(vars.$key-focus--border-offset) solid transparent;
177	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);	177	border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
178	box-shadow:	178	box-shadow:
179	0	179	0
180	0	180	0
181	0	181	0
182	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))	182	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
183	props.get(vars.$key-focus--outline-color);	183	props.get(vars.$key-focus--outline-color);
184	opacity: 1;	184	opacity: 1;
185	}	185	}
186	}	186	}
187	}	187	}
188		188
189	@include bem.elem('image') {	189	@include bem.elem('image') {
190	position: relative;	190	position: relative;
191	background-color: props.get(vars.$quiet--image-color);	191	background-color: props.get(vars.$quiet--image-color);
192	background-clip: padding-box;	192	background-clip: padding-box;
193	border-radius: props.get(vars.$rounding);	193	border-radius: props.get(vars.$rounding);
194	}	194	}
195		195
196	@include bem.elem('body') {	196	@include bem.elem('body') {
197	padding: 0;	197	padding: 0;
198	padding-block-start: props.get(vars.$spacing);	198	padding-block-start: props.get(vars.$spacing);
199	}	199	}
200		200
201	@include bem.elem('footer') {	201	@include bem.elem('footer') {
202	padding-inline: 0;	202	padding-inline: 0;
203	}	203	}
204	}	204	}
205		205
206	@include bem.modifier('thumbnail') {	206	@include bem.modifier('thumbnail') {
207	@include bem.elem('image') {	207	@include bem.elem('image') {
208	border-radius: props.get(vars.$rounding);	208	border-radius: props.get(vars.$rounding);
209	}	209	}
210		210
211	@include bem.elem('body') {	211	@include bem.elem('body') {
212	position: absolute;	212	position: absolute;
213	inset-block-end: calc(-1 * props.get(vars.$border-width));	213	inset-block-end: calc(-1 * props.get(vars.$border-width));
214	inset-inline: calc(-1 * props.get(vars.$border-width));	214	inset-inline: calc(-1 * props.get(vars.$border-width));
215	z-index: 10;	215	z-index: 10;
216	visibility: hidden;	216	visibility: hidden;
217	background-color: props.get(vars.$hover--bg-color);	217	background-color: props.get(vars.$hover--bg-color);
218	border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);	218	border-color: transparent;
219	border-color: transparent;	219	border-style: solid;
220	border-style: solid;	220	border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
221	border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));	221	border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
222	border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));	222	border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
223	opacity: 0;	223	opacity: 0;
224	transition:	224	transition:
225	border-color .2s ease,	225	border-color .2s ease,
226	opacity .2s ease,	226	opacity .2s ease,
227	visibility 0s .2s linear;	227	visibility 0s .2s linear;
228	}	228	}
229		229
230	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {	230	@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
231	&:hover,	231	&:hover,
232	&:active,	232	&:active,
233	&:focus-visible {	233	&:focus-visible {
234	@include bem.elem('body') {	234	@include bem.elem('body') {
235	border-color: props.get(vars.$hover--border-color);	235	visibility: visible;
236	visibility: visible;	236	border-color: props.get(vars.$hover--border-color);
237	opacity: 1;	237	opacity: 1;
238	transition:	238	transition:
239	border-color .2s ease,	239	border-color .2s ease,
240	opacity .2s ease,	240	opacity .2s ease,
241	visibility .2s linear;	241	visibility .2s linear;
242	}	242	}
243	}	243	}
244	}	244	}
245	}	245	}
246		246
247	@include bem.modifier('horizontal') {	247	@include bem.modifier('horizontal') {
248	flex-direction: row;	248	flex-direction: row;
249	align-items: center;	249	align-items: center;
250		250
251	@include bem.elem('image') {	251	@include bem.elem('image') {
252	align-self: stretch;	252	align-self: stretch;
253	inline-size: auto;	253	inline-size: auto;
254		254
255	&:first-child {	255	&:first-child {
256	border-start-end-radius: 0;	256	border-start-end-radius: 0;
257	border-end-start-radius: props.get(vars.$rounding);	257	border-end-start-radius: props.get(vars.$rounding);
258	}	258	}
259		259
260	&:last-child {	260	&:last-child {
261	border-start-end-radius: props.get(vars.$rounding);	261	border-start-end-radius: props.get(vars.$rounding);
262	border-end-start-radius: 0;	262	border-end-start-radius: 0;
263	}	263	}
264	}	264	}
265		265
266	@include bem.elem('body') {	266	@include bem.elem('body') {
267	flex: 0 0 auto;	267	flex: 0 0 auto;
268		268
269	@include bem.modifier('main') {	269	@include bem.modifier('main') {
270	flex-shrink: 1;	270	flex-shrink: 1;
271	inline-size: 100%;	271	inline-size: 100%;
272	min-inline-size: 0;	272	min-inline-size: 0;
273	}	273	}
274	}	274	}
275	}	275	}
276	}	276	}
277	}	277	}