feat(wc): extract css classes from the metariel theme for overlay bac…

…kdrop

This makes the overlay correctly close with WC as well

apps/webcomponents/src/styles.css

@@ -32,7 +32,7 @@
   -webkit-font-smoothing: antialiased;
 }
 
-/* Material Theme */
+/* These classes were extracted from the full Material theme to save size */
 .cdk-overlay-pane {
   position: absolute;
   pointer-events: auto;
@@ -42,7 +42,6 @@
   max-width: 100%;
   max-height: 100%;
 }
-
 .cdk-overlay-connected-position-bounding-box {
   position: absolute;
   z-index: 1000;
@@ -51,6 +50,30 @@
   min-width: 1px;
   min-height: 1px;
 }
+.cdk-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  pointer-events: auto;
+  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  opacity: 0;
+}
+.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 1;
+}
+.cdk-overlay-transparent-backdrop {
+  transition: visibility 1ms linear, opacity 1ms linear;
+  visibility: hidden;
+  opacity: 1;
+}
+.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
+  opacity: 0;
+  visibility: visible;
+}
+
 .gn-ui-overlay-container {
   position: absolute;
   z-index: 1000;