Add highlight mod to o-card

1 files changed, 30 insertions, 4 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 1dd394f..c4d8c85 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -67,6 +67,27 @@
                         }
                 }
 
+                @include bem.modifier('highlight') {
+                        border-color:  props.get(vars.$highlight--border-color);
+                        outline-width: calc(props.get(vars.$highlight--border-width) - props.get(vars.$border-width));
+                        outline-style: solid;
+                        outline-color: props.get(vars.$highlight--border-color);
+                        box-shadow:
+                                props.get(vars.$highlight--shadow-x)
+                                props.get(vars.$highlight--shadow-y)
+                                props.get(vars.$highlight--shadow-blur)
+                                props.get(vars.$highlight--shadow-grow)
+                                props.get(vars.$highlight--shadow-color);
+
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        border-color: props.get(vars.$highlight--border-color);
+                                }
+                        }
+                }
+
                 @include bem.elem('avatar') {
                         margin-block-start:  props.get(vars.$pad-b);
                         margin-inline-start: props.get(vars.$pad-i);
@@ -113,7 +134,7 @@
                 }
 
                 @include bem.elem('body') {
-                        flex:            1 0 auto;
+                        flex:            0 0 auto;
                         padding-block:   props.get(vars.$pad-b);
                         padding-inline:  props.get(vars.$pad-i);
 
@@ -128,6 +149,12 @@
                                         display: none;
                                 }
                         }
+
+                        @include bem.modifier('main') {
+                                flex-shrink:    1;
+                                block-size:     100%;
+                                min-block-size: 0;
+                        }
                 }
 
                 @include bem.elem('content') {
@@ -270,10 +297,9 @@
                         }
 
                         @include bem.elem('body') {
-                                flex: 0 0 auto;
-
                                 @include bem.modifier('main') {
-                                        flex-shrink:     1;
+                                        block-size:      auto;
+                                        min-block-size:  none;
                                         inline-size:     100%;
                                         min-inline-size: 0;
                                 }