Adjust delete overlay dimming, sizing, and object card composition

styles/01-foundations.css

@@ -200,12 +200,13 @@
   --surface-delete-confirmation-overlay: var(--color-light-grey);
   --text-delete-confirmation-overlay: var(--color-font-dark);
   --layout-delete-confirmation-target-max-width: 35rem;
-  --layout-delete-confirmation-overlay-max-width: 28rem;
+  --layout-delete-confirmation-overlay-width-factor: 0.8;
   --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
+  --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
   --layout-delete-confirmation-label-width: var(--dimension-input-label-width);
-  --layout-delete-confirmation-target-dim-factor: 0.6;
+  --layout-delete-confirmation-target-dim-opacity: 0.5;
   --layer-delete-confirmation-overlay: 50;
 
   /* Typography */

styles/27-patterns-delete-confirmation.css

@@ -12,7 +12,17 @@
 }
 
 .sg-delete-confirmation-pattern__target {
-  filter: brightness(var(--layout-delete-confirmation-target-dim-factor));
+  position: relative;
+  overflow: hidden;
+}
+
+.sg-delete-confirmation-pattern__target::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--color-dark-grey);
+  opacity: var(--layout-delete-confirmation-target-dim-opacity);
+  pointer-events: none;
 }
 
 .sg-delete-confirmation-pattern__floating-card {
@@ -20,7 +30,7 @@
   top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
   transform: translateX(-50%);
-  width: min(100%, var(--layout-delete-confirmation-overlay-max-width));
+  width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }
@@ -53,13 +63,10 @@
   display: flex;
   justify-content: flex-end;
   gap: var(--layout-delete-confirmation-actions-gap);
+  margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
 }
 
 @media (max-width: 48rem) {
-  .sg-delete-confirmation-pattern__floating-card {
-    width: 100%;
-  }
-
   .sg-delete-confirmation-pattern__actions {
     flex-wrap: wrap;
   }