From bbd50795137d9c514f80303b2010abfa777f50e0 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 3 Mar 2026 08:18:12 +0100
Subject: Card highlight style

---
 src/objects/_card.scss      | 12 ++++++++++--
 src/objects/_card.vars.scss |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/objects')

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') {
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index c828e93..e84b8c3 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), 'color') !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--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;
-- 
cgit v1.2.3-70-g09d2