feat: add custom CSS property to control overlay viewport inset (#10108)

Author: web-padawan

packages/overlay/src/styles/vaadin-overlay-base-styles.js

@@ -16,7 +16,7 @@ export const overlayStyles = css`
 
     /* Default position constraints. Themes can
           override this to adjust the gap between the overlay and the viewport. */
-    inset: 8px;
+    inset: var(--vaadin-overlay-viewport-inset, 8px);
     bottom: var(--vaadin-overlay-viewport-bottom);
 
     /* Override native [popover] user agent styles */

packages/vaadin-lumo-styles/src/mixins/overlay.css

@@ -38,7 +38,7 @@
     /* CSS API for host */
     --vaadin-overlay-viewport-bottom: 0;
 
-    inset: var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m) var(--lumo-space-m);
+    inset: var(--vaadin-overlay-viewport-inset, var(--lumo-space-m));
     /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
     /* stylelint-disable-next-line */
     outline: 0px solid transparent;