[EuiModal] Fix box-shadows

elastic · Nov 18, 2022 · 95c5d69 · 95c5d69
1 parent 3d0a929
commit 95c5d69
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
+import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import {
   euiCanAnimate,
   euiBreakpoint,
@@ -21,7 +21,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiModal: css`
-      ${euiShadow(euiThemeContext, 'l')}
+      ${euiShadowXLarge(euiThemeContext)}
       display: flex;
       flex-direction: column;
       max-block-size: 75vh; // We overflow the modal body based off this
@@ -65,7 +65,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
-        ${euiShadow(euiThemeContext, 'l')}
+        ${euiShadowXLarge(euiThemeContext, { reverse: true })}
         inset-block-start: auto;
       }
     `,