Fix styles for new remove button in File question (#8385)

src/defaultV2-theme/blocks/sd-context-btn.scss

@@ -48,17 +48,29 @@
   }
 }
 .sd-context-btn--with-border {
-  border: 1px solid $border-inside;
+  --box-shadow-color: #{$border-inside};
+  box-shadow: 0 0 0 1px var(--box-shadow-color);
+}
+.sd-context-btn--colorful {
+  use {
+    fill: $primary;
+  }
+  &.sd-context-btn--negative {
+    use {
+      fill: red;
+    }
+  }
 }
 .sd-context-btn--colorful:focus,
 .sd-context-btn--colorful:hover {
-  border-color: $primary;
   background: linear-gradient($primary-light, $primary-light), linear-gradient($background, $background);
-  &.sd-context-btn--with-border {
-    border-color: $primary;
-  }
   &.sd-context-btn--negative {
-    border-color: $red;
     background: linear-gradient($red-light, $red-light), linear-gradient($background, $background);
   }
+  &.sd-context-btn--with-border {
+    --box-shadow-color: #{$primary};
+    &.sd-context-btn--negative {
+      --box-shadow-color: #{$red};
+    }
+  }
 }

src/defaultV2-theme/variables.scss

@@ -168,7 +168,7 @@ $matrix-row-fade-out-duration: var(--sjs-matrix-row-fade-out-duration, 100ms);
 $matrix-row-move-out-duration: var(--sjs-matrix-row-move-out-duration, 250ms);
 $matrix-row-move-out-delay: var(--sjs-matrix-row-move-out-delay, 100ms);
 
-$matrix-detail-row-fade-in-duration: var(--sjs--fade-in-duration, 500ms);
+$matrix-detail-row-fade-in-duration: var(--sjs-matrix-detail-row-fade-in-duration, 500ms);
 $matrix-detail-row-move-in-duration: var(--sjs-matrix-detail-row-move-in-duration, 150ms);
 $matrix-detail-row-fade-in-delay: var(--sjs-matrix-detail-row-fade-in-delay, 150ms);
 $matrix-detail-row-fade-out-duration: var(--sjs-matrix-detail-row-fade-out-duration, 150ms);
@@ -195,7 +195,6 @@ $pd-tab-remove-fade-out-duration: var(--sjs-pd-tab-remove-fade-out-duration, 150
 $pd-tab-remove-fade-out-delay: var(--sjs-pd-tab-remove-fade-out-delay, 0ms);
 $pd-tab-remove-fade-in-delay: var(--sjs-pd-tab-remove-fade-in-delay, 150ms);
 
-
 $pd-list-fade-in-duration: var(--sjs-pd-list-fade-in-duration, 500ms);
 $pd-list-move-in-duration: var(--sjs-pd-list-move-in-duration, 250ms);
 $pd-list-fade-in-delay: var(--sjs-pd-list-fade-in-delay, 250ms);