Card highlight style

1 files changed, 10 insertions, 2 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index c92aede..f18f596 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -68,14 +68,22 @@
                 }
 
                 @include bem.modifier('highlight') {
-                        outline:        props.get(vars.$highlight--border-width) solid props.get(vars.$highlight--border-color);
-                        outline-offset: calc(-1 * props.get(vars.$highlight--border-width));
+                        margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width));
+                        border-color: props.get(vars.$highlight--border-color);
+                        border-width: props.get(vars.$highlight--border-width);
                         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 {
+                                        border-color: props.get(vars.$highlight--border-color);
+                                }
+                        }
                 }
 
                 @include bem.elem('avatar') {