1 files changed, 68 insertions, 59 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index c87e676..d5d300d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,36 +14,28 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
-        background-clip:  content-box;
-        border:           props.get(vars.$key-focus--border-offset) solid transparent;
-        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-        transition:       transform .2s;
+        border:           props.get(vars.$border-width) solid transparent;
+        border-color:     props.get(vars.$border-color);
+        border-radius:    props.get(vars.$rounding);
+        transition:       transform .2s, background-color .2s, border-color .2s;
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
             &:active,
             &:focus-visible {
-                transform: translateY(props.get(vars.$hover--offset-b));
-
-                @include bem.elem('body') {
-                    @include bem.modifier('hidden') {
-                        visibility: visible;
-                        opacity:    1;
-                        transition:
-                            opacity .2s ease,
-                            visibility .2s linear;
-                    }
-                }
+                transform:        translateY(props.get(vars.$hover--offset-b));
+                background-color: props.get(vars.$hover--bg-color);
+                border-color:     props.get(vars.$hover--border-color);
             }
 
             &:focus-visible {
-                outline:      props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                 box-shadow:
-                    0
-                    0
-                    0
+                    0 0 0
                     calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
                     props.get(vars.$key-focus--outline-color);
             }
@@ -64,13 +56,13 @@
             transition:  background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: props.get(vars.$rounding);
-                border-start-end-radius:   props.get(vars.$rounding);
+                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
             }
 
             &:last-child {
-                border-end-start-radius: props.get(vars.$rounding);
-                border-end-end-radius:   props.get(vars.$rounding);
+                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
             }
 
             @include bem.next-elem('avatar') {
@@ -103,26 +95,6 @@
                 margin-block:  -100em 100em;
                 content:       '';
             }
-
-            @include bem.modifier('hidden') {
-                position:                absolute;
-                inset-block-end:         0;
-                inset-inline:            0;
-                z-index:                 10;
-                visibility:              hidden;
-                background-color:        props.get(vars.$bg-color);
-                //border-end-start-radius: props.get(vars.$rounding);
-                //border-end-end-radius:   props.get(vars.$rounding);
-                opacity:                 0;
-                transition:
-                    opacity .2s ease,
-                    visibility 0s .2s linear;
-
-                @include bem.next-elem('image') {
-                    border-start-start-radius: props.get(vars.$rounding);
-                    border-start-end-radius:   props.get(vars.$rounding);
-                }
-            }
         }
 
         @include bem.elem('content') {
@@ -148,31 +120,32 @@
             margin-inline:    0;
             background-color: transparent;
             border:           0;
+            box-shadow:       none;
 
             @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
                 &:active,
                 &:focus-visible {
-                    transform: none;
+                    transform:        none;
+                    background-color: transparent;
 
                     @include bem.elem('image') {
                         background-color: props.get(vars.$quiet--hover--image-color);
                         opacity:          .75;
                         transform:        translateY(props.get(vars.$hover--offset-b));
                     }
-
-                    @include bem.elem('body') {
-                        @include bem.modifier('hidden') {
-                            transform: translateY(props.get(vars.$hover--offset-b));
-                        }
-                    }
                 }
 
                 &:focus-visible {
+                    margin:     0;
                     outline:    none;
+                    border:     0;
                     box-shadow: none;
 
                     @include bem.elem('image') {
+                        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                        border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
                         background-color: props.get(vars.$quiet--hover--image-color);
                         outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                         box-shadow:
@@ -188,21 +161,14 @@
 
             @include bem.elem('image') {
                 position:         relative;
-                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
                 background-color: props.get(vars.$quiet--image-color);
                 background-clip:  padding-box;
-                border:           props.get(vars.$key-focus--border-offset) solid transparent;
-                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                border-radius:    props.get(vars.$rounding);
             }
 
             @include bem.elem('body') {
                 padding:             0;
                 padding-block-start: props.get(vars.$spacing);
-
-                @include bem.modifier('hidden') {
-                    padding-block:  props.get(vars.$pad-b);
-                    padding-inline: props.get(vars.$pad-i);
-                }
             }
 
             @include bem.elem('footer') {
@@ -210,6 +176,49 @@
             }
         }
 
+        @include bem.modifier('thumbnail') {
+            @include bem.elem('image') {
+                inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                margin:        calc(-1 * props.get(vars.$border-width));
+                border-radius: props.get(vars.$rounding);
+            }
+
+            @include bem.elem('body') {
+                position:                absolute;
+                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                inset-inline:            calc(-1 * props.get(vars.$border-width));
+                z-index:                 10;
+                visibility:              hidden;
+                background-color:        props.get(vars.$bg-color);
+                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+                border-color:            transparent;
+                border-style:            solid;
+                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                opacity:                 0;
+                transition:
+                    border-color .2s ease,
+                    opacity .2s ease,
+                    visibility 0s .2s linear;
+            }
+
+            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    @include bem.elem('body') {
+                        border-color: props.get(vars.$hover--border-color);
+                        visibility:   visible;
+                        opacity:      1;
+                        transition:
+                            border-color .2s ease,
+                            opacity .2s ease,
+                            visibility .2s linear;
+                    }
+                }
+            }
+        }
+
         @include bem.modifier('horizontal') {
             flex-direction: row;
             align-items:    center;