Fix

2 files changed, 4 insertions, 2 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 7cb198c..ab2be40 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -69,7 +69,9 @@
 
                 @include bem.modifier('highlight') {
                         border-color:  props.get(vars.$highlight--border-color);
-                        border-width:  props.get(vars.$highlight--border-width);
+                        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)
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index e84b8c3..c828e93 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -34,7 +34,7 @@ $highlight--shadow-blur: props.def(--o-card--highlight--shadow-blur, props.get(c
 $highlight--shadow-grow: props.def(--o-card--highlight--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
 
 $highlight--border-width: props.def(--o-card--highlight--border-width, props.get(core.$border-width--medium)) !default;
-$highlight--border-color: props.def(--o-card--highlight--border-color, props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --700) props.get(core.$theme, --accent, --800), 'color') !default;
+$highlight--border-color: props.def(--o-card--highlight--border-color, props.get(core.$theme, --accent, --700), 'color') !default;
 $highlight--shadow-color: props.def(--o-card--highlight--shadow-color, props.get(core.$theme, --accent, --200), 'color') !default;
 
 $hover--bg-color:         props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;