Improved merged card list layout

1 files changed, 41 insertions, 24 deletions

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index f7f7261..1645b49 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -4,6 +4,8 @@
 @use 'iro-sass/src/props';
 @use '../props' as *;
 
+@use '../objects/card.vars' as card;
+
 @forward 'card-list.vars';
 @use 'card-list.vars' as vars;
 
@@ -16,52 +18,67 @@
                 gap:            props.get(vars.$row-gap);
 
                 @include bem.modifier('merge') {
-                        position:         relative;
-                        gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
-                        padding:          props.get(vars.$merge-padding);
-                        background-color: props.get(vars.$card-bg-color);
-                        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
-                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
+                        position:      relative;
+                        gap:           0;
+                        border-radius: props.get(vars.$rounding);
 
                         @include bem.elem('card') {
-                                box-shadow: none;
+                                background-clip: content-box;
 
                                 &:not(:last-child) {
                                         position:                relative;
                                         border-end-start-radius: 0;
                                         border-end-end-radius:   0;
-
-                                        &::after {
-                                                position:          absolute;
-                                                inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
-                                                inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
-                                                display:           block;
-                                                block-size:        props.get(vars.$border-width);
-                                                content:           '';
-                                                background-color:  props.get(vars.$border-color);
-                                        }
                                 }
 
                                 &:hover,
                                 &:active,
                                 &:focus-visible {
-                                        transform:  none;
+                                        transform: none;
+                                        z-index:   10;
                                 }
 
                                 @include bem.next-twin-elem {
+                                        margin-block-start:        calc(-1 * props.get(card.$border-width));
+                                        border-block-start-color:  transparent;
                                         border-start-start-radius: 0;
                                         border-start-end-radius:   0;
+
+                                        &: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 {
+                                        border-color: props.get(card.$hover--bg-color);
                                 }
                         }
 
                         @include bem.modifier('borderless') {
-                                border-color: props.get(vars.$card-bg-color);
-
                                 @include bem.elem('card') {
-                                        &:not(:last-child) {
-                                                &::after {
-                                                        inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
-                                                }
+                                        border-inline-color: props.get(vars.$card-bg-color);
+                                        border-block-color:  props.get(vars.$card-bg-color) props.get(card.$border-color);
+
+                                        @include bem.next-twin-elem {
+                                                border-block-start-color: transparent;
+                                        }
+
+                                        &:last-child {
+                                                border-block-end-color: props.get(vars.$card-bg-color);
+                                        }
+
+                                        &:hover,
+                                        &:active {
+                                                border-color: props.get(card.$hover--border-color);
+                                        }
+
+                                        &:focus-visible {
+                                                border-color: props.get(card.$hover--bg-color);
                                         }
                                 }
                         }