From c32d123e08d4c8674b9e64d072c6c838804772eb Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 5 Mar 2026 10:20:28 +0100
Subject: card-list: Add interactive mod

---
 src/layouts/_card-list.scss | 76 ++++++++++++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 5babc64..62131f7 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -22,6 +22,16 @@
 			gap:           0;
 			border-radius: props.get(card.$rounding);
 
+			@include bem.modifier('interactive') {
+				transition: transform .2s;
+
+				&:hover,
+				&:active,
+				&:focus-within {
+					transform: translateY(props.get(card.$hover--offset-b));
+				}
+			}
+
 			@include bem.elem('card') {
 				border-color:    props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
 				background-clip: content-box;
@@ -33,14 +43,16 @@
 					border-end-end-radius:   0;
 				}
 
-				&:hover,
-				&:active,
-				&:focus-visible {
-					transform: none;
-				}
+				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+					&:hover,
+					&:active,
+					&:focus-visible {
+						transform: none;
+					}
 
-				&:focus-visible {
-					z-index: 10;
+					&:focus-visible {
+						z-index: 10;
+					}
 				}
 
 				@include bem.next-twin-elem {
@@ -49,13 +61,15 @@
 					border-start-start-radius: 0;
 					border-start-end-radius:   0;
 
-					&:hover,
-					&:active {
-						border-block-start-color: props.get(card.$hover--border-color);
-					}
+					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+						&:hover,
+						&:active {
+							border-block-start-color: props.get(card.$hover--border-color);
+						}
 
-					&:focus-visible {
-						margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
+						&:focus-visible {
+							margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
+						}
 					}
 				}
 
@@ -63,17 +77,19 @@
 					border-block-end-color: props.get(card.$border-color);
 				}
 
-				&:hover,
-				&:active {
-					border-color: props.get(card.$hover--border-color);
-				}
+				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+					&:hover,
+					&:active {
+						border-color: props.get(card.$hover--border-color);
+					}
 
-				&:focus-visible {
-					border-color: props.get(card.$hover--bg-color);
-					box-shadow:
-						0 0 0
-						calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
-						props.get(card.$key-focus--outline-color);
+					&:focus-visible {
+						border-color: props.get(card.$hover--bg-color);
+						box-shadow:
+							0 0 0
+							calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
+							props.get(card.$key-focus--outline-color);
+					}
 				}
 			}
 
@@ -89,13 +105,15 @@
 						border-block-end-color: props.get(card.$bg-color);
 					}
 
-					&:hover,
-					&:active {
-						border-color: props.get(card.$hover--border-color);
-					}
+					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
+						&:hover,
+						&:active {
+							border-color: props.get(card.$hover--border-color);
+						}
 
-					&:focus-visible {
-						border-color: props.get(card.$hover--bg-color);
+						&:focus-visible {
+							border-color: props.get(card.$hover--bg-color);
+						}
 					}
 				}
 			}
-- 
cgit v1.2.3-70-g09d2