diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.tsx
similarity index 100%
rename from src-docs/src/views/flyout/flyout.js
rename to src-docs/src/views/flyout/flyout.tsx
diff --git a/src-docs/src/views/flyout/flyout_banner.js b/src-docs/src/views/flyout/flyout_banner.tsx
similarity index 100%
rename from src-docs/src/views/flyout/flyout_banner.js
rename to src-docs/src/views/flyout/flyout_banner.tsx
diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.tsx
similarity index 96%
rename from src-docs/src/views/flyout/flyout_complicated.js
rename to src-docs/src/views/flyout/flyout_complicated.tsx
index e4f43c67fa7..8d6a4462efe 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.tsx
@@ -56,11 +56,9 @@ export default () => {
   const togglePopover = () =>
     setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
 
-  const onSelectedTabChanged = (id) => setSelectedTabId(id);
-
   const renderTabs = tabs.map((tab, index) => (
     <EuiTab
-      onClick={() => onSelectedTabChanged(tab.id)}
+      onClick={() => setSelectedTabId(tab.id)}
       isSelected={tab.id === selectedTabId}
       key={index}
     >
@@ -107,10 +105,6 @@ export default () => {
     },
   ];
 
-  const onSuperSelectChange = (value) => {
-    setSuperSelectValue(value);
-  };
-
   const flyoutContent = (
     <EuiText>
       <p>
@@ -224,7 +218,7 @@ export default () => {
               <EuiSuperSelect
                 options={superSelectOptions}
                 valueOfSelected={superSelectvalue}
-                onChange={(value) => onSuperSelectChange(value)}
+                onChange={(value) => setSuperSelectValue(value)}
                 itemLayoutAlign="top"
                 popoverProps={{ repositionOnScroll: true }}
                 hasDividers
diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index c57729a21ae..5d78b9b2e0c 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -18,14 +18,14 @@ const flyoutSource = require('!!raw-loader!./flyout');
 import FlyoutComplicated from './flyout_complicated';
 const flyoutComplicatedSource = require('!!raw-loader!./flyout_complicated');
 
-import FlyoutSmall from './flyout_small';
-const flyoutSmallSource = require('!!raw-loader!./flyout_small');
+import FlyoutOwnFocus from './flyout_own_focus';
+const flyoutOwnFocusSource = require('!!raw-loader!./flyout_own_focus');
 
-import FlyoutLarge from './flyout_large';
-const flyoutLargeSource = require('!!raw-loader!./flyout_large');
+import FlyoutSizes from './flyout_sizes';
+const flyoutSizesSource = require('!!raw-loader!./flyout_sizes');
 
-import FlyoutPaddingMedium from './flyout_padding_medium';
-const FlyoutPaddingMediumSource = require('!!raw-loader!./flyout_padding_medium');
+import FlyoutPaddingSizes from './flyout_padding_sizes';
+const FlyoutPaddingSizesSource = require('!!raw-loader!./flyout_padding_sizes');
 
 import FlyoutMaxWidth from './flyout_max_width';
 const flyoutMaxWidthSource = require('!!raw-loader!./flyout_max_width');
@@ -66,7 +66,7 @@ const flyoutComplicatedSnippet = `<EuiFlyout onClose={closeFlyout}>
 </EuiFlyout>
 `;
 
-const flyoutSmallSnippet = `<EuiFlyout ownFocus={false} size="s" onClose={closeFlyout}>
+const flyoutOwnFocusSnippet = `<EuiFlyout ownFocus={false} size="s" onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
       <h2 id={flyoutHeadingId}><!-- Defaults to medium size. Change the heading level based on your context. --></h2>
@@ -78,7 +78,7 @@ const flyoutSmallSnippet = `<EuiFlyout ownFocus={false} size="s" onClose={closeF
 </EuiFlyout>
 `;
 
-const flyoutMediumPaddingSnippet = `<EuiFlyout paddingSize="m" onClose={closeFlyout}>
+const flyoutSizesPaddingSnippet = `<EuiFlyout paddingSize="m" onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
       <h2 id={flyoutHeadingId}>
@@ -104,7 +104,7 @@ const flyoutMaxWidthSnippet = `<EuiFlyout maxWidth={448} onClose={closeFlyout}>
 </EuiFlyout>
 `;
 
-const flyoutLargeSnippet = `<EuiFlyout size="l" onClose={closeFlyout}>
+const flyoutSizesSnippet = `<EuiFlyout size="l" onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
       <h2 id={flyoutHeadingId}><!-- Defaults to medium size. Change the heading level based on your context. --></h2>
@@ -214,8 +214,8 @@ export const FlyoutExample = {
       title: 'Sizing',
       source: [
         {
-          type: GuideSectionTypes.JS,
-          code: flyoutLargeSource,
+          type: GuideSectionTypes.TSX,
+          code: flyoutSizesSource,
         },
       ],
       text: (
@@ -227,16 +227,16 @@ export const FlyoutExample = {
           number or string format.
         </p>
       ),
-      snippet: flyoutLargeSnippet,
-      demo: <FlyoutLarge />,
+      snippet: flyoutSizesSnippet,
+      demo: <FlyoutSizes />,
       props: { EuiFlyout },
     },
     {
       title: 'Adjusting padding',
       source: [
         {
-          type: GuideSectionTypes.JS,
-          code: FlyoutPaddingMediumSource,
+          type: GuideSectionTypes.TSX,
+          code: FlyoutPaddingSizesSource,
         },
       ],
       text: (
@@ -250,8 +250,8 @@ export const FlyoutExample = {
           flyout.
         </p>
       ),
-      snippet: flyoutMediumPaddingSnippet,
-      demo: <FlyoutPaddingMedium />,
+      snippet: flyoutSizesPaddingSnippet,
+      demo: <FlyoutPaddingSizes />,
       props: { EuiFlyout },
     },
     {
@@ -282,7 +282,7 @@ export const FlyoutExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: flyoutSmallSource,
+          code: flyoutOwnFocusSource,
         },
       ],
       text: (
@@ -302,8 +302,8 @@ export const FlyoutExample = {
           </p>
         </>
       ),
-      snippet: flyoutSmallSnippet,
-      demo: <FlyoutSmall />,
+      snippet: flyoutOwnFocusSnippet,
+      demo: <FlyoutOwnFocus />,
       props: { EuiFlyout },
     },
     {
@@ -339,7 +339,7 @@ export const FlyoutExample = {
       title: 'Understanding max-width',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: flyoutMaxWidthSource,
         },
       ],
diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.tsx
similarity index 95%
rename from src-docs/src/views/flyout/flyout_max_width.js
rename to src-docs/src/views/flyout/flyout_max_width.tsx
index 80db2a0c417..666e9626138 100644
--- a/src-docs/src/views/flyout/flyout_max_width.js
+++ b/src-docs/src/views/flyout/flyout_max_width.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import {
   EuiFlyout,
+  EuiFlyoutProps,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiLink,
@@ -19,8 +20,10 @@ import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const [flyoutSize, setFlyoutSize] = useState('m');
-  const [flyoutMaxWidth, setFlyoutMaxWidth] = useState(false);
+  const [flyoutSize, setFlyoutSize] = useState<EuiFlyoutProps['size']>('m');
+  const [flyoutMaxWidth, setFlyoutMaxWidth] = useState<
+    EuiFlyoutProps['maxWidth']
+  >(false);
   const maxWidthFlyoutTitleId = useGeneratedHtmlId({
     prefix: 'maxWidthFlyoutTitle',
   });
@@ -30,7 +33,10 @@ export default () => {
 
   const closeFlyout = () => setIsFlyoutVisible(false);
 
-  const showFlyout = (size = 'm', maxWidth = false) => {
+  const showFlyout = (
+    size: EuiFlyoutProps['size'] = 'm',
+    maxWidth: EuiFlyoutProps['maxWidth'] = false
+  ) => {
     setFlyoutSize(size);
     setFlyoutMaxWidth(maxWidth);
     setIsFlyoutVisible(true);
@@ -105,6 +111,7 @@ export default () => {
                 max={100}
                 name="range"
                 id={maxWidthFlyoutRangeId}
+                value={50}
               />
             </EuiFormRow>
           </EuiForm>
diff --git a/src-docs/src/views/flyout/flyout_small.js b/src-docs/src/views/flyout/flyout_own_focus.tsx
similarity index 100%
rename from src-docs/src/views/flyout/flyout_small.js
rename to src-docs/src/views/flyout/flyout_own_focus.tsx
diff --git a/src-docs/src/views/flyout/flyout_padding_medium.js b/src-docs/src/views/flyout/flyout_padding_sizes.tsx
similarity index 91%
rename from src-docs/src/views/flyout/flyout_padding_medium.js
rename to src-docs/src/views/flyout/flyout_padding_sizes.tsx
index 7c7d1561925..024cd4338f8 100644
--- a/src-docs/src/views/flyout/flyout_padding_medium.js
+++ b/src-docs/src/views/flyout/flyout_padding_sizes.tsx
@@ -6,6 +6,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
+  EuiFlyoutProps,
   EuiFlyoutHeader,
   EuiFlyoutBody,
   EuiFlyoutFooter,
@@ -63,7 +64,7 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        paddingSize={paddingSize}
+        paddingSize={paddingSize as EuiFlyoutProps['paddingSize']}
         id={mediumPaddingFlyoutId}
         aria-labelledby={mediumPaddingFlyoutTitleId}
       >
@@ -76,15 +77,16 @@ export default () => {
         </EuiFlyoutHeader>
         <EuiFlyoutBody banner={callOut}>
           <EuiFormRow label="Change the paddingSize">
+            {/* @ts-ignore - EuiButtonGroup is not correctly detecting type="single" */}
             <EuiButtonGroup
               legend="Flyout paddingSize"
               color="primary"
-              size="s"
+              buttonSize="s"
               options={sizes}
               idSelected={paddingSize}
-              onChange={(id) => {
+              onChange={(id: string) => {
                 const newName = sizes
-                  .find((size) => size.id === id)
+                  .find((size) => size.id === id)!
                   .label.toLowerCase();
                 setPaddingSize(id);
                 setPaddingSizeName(newName);
diff --git a/src-docs/src/views/flyout/flyout_push.js b/src-docs/src/views/flyout/flyout_push.tsx
similarity index 100%
rename from src-docs/src/views/flyout/flyout_push.js
rename to src-docs/src/views/flyout/flyout_push.tsx
diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_sizes.tsx
similarity index 93%
rename from src-docs/src/views/flyout/flyout_large.js
rename to src-docs/src/views/flyout/flyout_sizes.tsx
index d6bd1bdbf25..cb7f11bf1f5 100644
--- a/src-docs/src/views/flyout/flyout_large.js
+++ b/src-docs/src/views/flyout/flyout_sizes.tsx
@@ -56,16 +56,16 @@ export default () => {
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
-          <EuiFormRow label="Change the paddingSize">
+          <EuiFormRow label="Change the flyout size">
             <EuiButtonGroup
               legend="Flyout size"
               color="primary"
-              size="s"
+              buttonSize="s"
               options={sizes}
               idSelected={size}
               onChange={(id) => {
                 const newName = sizes
-                  .find((size) => size.id === id)
+                  .find((size) => size.id === id)!
                   .label.toLowerCase();
                 setSize(id);
                 setSizeName(newName);
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index df70f8cc7fc..522b53e413b 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -17,14 +17,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
-        class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         id="id"
-        style="width: 320px;"
+        style="inline-size: 320px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -66,15 +66,15 @@ Array [
     >
       <nav
         aria-label="aria-label"
-        class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav testClass1 testClass2"
+        class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left"
         data-test-subj="test subject string"
         id="id"
-        style="width: 320px;"
+        style="inline-size: 320px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -112,14 +112,14 @@ Array [
     data-focus-lock-disabled="false"
   >
     <nav
-      class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
       id="id"
-      style="width: 240px;"
+      style="inline-size: 240px;"
       tabindex="-1"
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -162,14 +162,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
-        class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         id="id"
-        style="width: 320px;"
+        style="inline-size: 320px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -208,14 +208,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
-        class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         id="id"
-        style="width: 320px;"
+        style="inline-size: 320px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -253,14 +253,14 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <nav
-      class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
       id="id"
-      style="width:320px"
+      style="inline-size:320px"
       tabindex="-1"
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -298,14 +298,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
-        class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         id="id"
-        style="width: 320px;"
+        style="inline-size: 320px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -349,14 +349,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
-        class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         id="id"
-        style="width: 320px;"
+        style="inline-size: 320px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -395,14 +395,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
-        class="euiFlyout euiFlyout--left euiFlyout--paddingNone euiCollapsibleNav"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
         id="id"
-        style="width: 240px;"
+        style="inline-size: 240px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1jwwyhx-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-left"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
diff --git a/src/components/collapsible_nav/collapsible_nav.spec.tsx b/src/components/collapsible_nav/collapsible_nav.spec.tsx
index d32574e0057..cb22c5a29ea 100644
--- a/src/components/collapsible_nav/collapsible_nav.spec.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.spec.tsx
@@ -67,7 +67,7 @@ describe('EuiCollapsibleNav', () => {
         cy.mount(<Nav />);
         cy.wait(400);
         cy.get('[data-test-subj="navSpecButton"]').realClick();
-        cy.get('.euiOverlayMask').realClick();
+        cy.get('.euiOverlayMask').realClick({ position: 'bottomRight' });
         expect(cy.get('#navSpec').should('not.exist'));
       });
 
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 18ecdd3dce4..26336fc2d95 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -18,14 +18,14 @@ Array [
     >
       <div
         aria-label="aria-label"
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge testClass1 testClass2"
+        class="euiFlyout testClass1 testClass2 emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         data-test-subj="test subject string"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -64,14 +64,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         id="imaflyout"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -110,13 +110,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--outside css-iod722-fill-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-s7z86u-fill-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-outside-right"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -155,13 +155,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="aria-label"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside testClass1 testClass2 css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton testClass1 testClass2 css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="test subject string"
           type="button"
         >
@@ -200,7 +200,7 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       />
@@ -231,13 +231,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -276,14 +276,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-overlay-right"
         role="dialog"
-        style="max-width: 1024px;"
+        style="max-inline-size: 1024px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -322,14 +322,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-overlay-right"
         role="dialog"
-        style="max-width: 24rem;"
+        style="max-inline-size: 24rem;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -368,13 +368,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge euiFlyout--maxWidth-default"
+        class="euiFlyout emotion-euiFlyout-l-m-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -413,13 +413,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -458,13 +458,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -502,13 +502,13 @@ Array [
     data-focus-lock-disabled="false"
   >
     <div
-      class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+      class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
       role="dialog"
       tabindex="-1"
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+        class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -546,13 +546,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -591,13 +591,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingMedium"
+        class="euiFlyout emotion-euiFlyout-m-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -636,13 +636,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingNone"
+        class="euiFlyout emotion-euiFlyout-none-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -681,13 +681,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingSmall"
+        class="euiFlyout emotion-euiFlyout-s-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -726,12 +726,12 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -770,13 +770,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--left euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-left"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -815,13 +815,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -860,14 +860,14 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-noMaxWidth-overlay-right"
         role="dialog"
-        style="width: 500px;"
+        style="inline-size: 500px;"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -906,13 +906,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--large euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-l-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -951,13 +951,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -996,13 +996,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-s-noMaxWidth-overlay-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
@@ -1041,13 +1041,13 @@ Array [
       data-focus-lock-disabled="false"
     >
       <div
-        class="euiFlyout euiFlyout--push euiFlyout--medium euiFlyout--paddingLarge"
+        class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-right"
         role="dialog"
         tabindex="-1"
       >
         <button
           aria-label="Close this dialog"
-          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside css-dsw53p-empty-text-hoverStyles-EuiButtonIcon"
+          class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton css-1830x61-empty-text-hoverStyles-EuiButtonIcon-euiFlyout__closeButton-inside"
           data-test-subj="euiFlyoutCloseButton"
           type="button"
         >
diff --git a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
index 609df0be80c..21f973c4f0d 100644
--- a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`EuiFlyoutBody is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlyoutBody testClass1 testClass2"
+  class="euiFlyoutBody testClass1 testClass2 emotion-euiFlyoutBody"
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlyoutBody__overflow"
+    class="euiFlyoutBody__overflow css-1fk8opf-noBanner"
     tabindex="0"
   >
     <div
diff --git a/src/components/flyout/__snapshots__/flyout_footer.test.tsx.snap b/src/components/flyout/__snapshots__/flyout_footer.test.tsx.snap
index 836944bb296..8c8d20f8741 100644
--- a/src/components/flyout/__snapshots__/flyout_footer.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout_footer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiFlyoutFooter is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlyoutFooter testClass1 testClass2"
+  class="euiFlyoutFooter testClass1 testClass2 emotion-euiFlyoutFooter"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/flyout/__snapshots__/flyout_header.test.tsx.snap b/src/components/flyout/__snapshots__/flyout_header.test.tsx.snap
index dca75c6fb93..5b064493597 100644
--- a/src/components/flyout/__snapshots__/flyout_header.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout_header.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`EuiFlyoutHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlyoutHeader testClass1 testClass2"
+  class="euiFlyoutHeader testClass1 testClass2 emotion-euiFlyoutHeader"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiFlyoutHeader props border is rendered 1`] = `
 <div
-  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+  class="euiFlyoutHeader emotion-euiFlyoutHeader-hasBorder"
 />
 `;
diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
deleted file mode 100644
index 91d5f58791d..00000000000
--- a/src/components/flyout/_flyout.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-.euiFlyout {
-  @include euiFlyout;
-  animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  // Remove focus ring because of `tabindex=0`
-  &:focus {
-    outline: none;
-  }
-}
-
-.euiFlyout__closeButton {
-  position: absolute;
-  right: $euiSizeS;
-  top: $euiSizeS;
-  z-index: 3;
-
-  &:not(.euiFlyout__closeButton--outside) {
-    background-color: transparentize($euiColorEmptyShade, .1);
-  }
-
-  &--outside {
-    // match dropshadow
-    @include euiBottomShadowLarge;
-    right: auto;
-    left: 0;
-    // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
-    transform: translateX(calc(-100% - #{$euiSizeL})) !important;
-    animation: none !important;
-
-    .euiFlyout--left & {
-      left: auto;
-      right: 0;
-      transform: translateX(calc(100% + #{$euiSizeL})) !important;
-    }
-  }
-}
-
-.euiFlyoutBody__banner {
-  overflow-x: hidden;
-}
-
-/**
- * 1. Calculating the minimum width based on the screen takeover breakpoint
- */
-$flyoutSizes: (
-  'small': (
-    min: round(map-get($euiBreakpoints, 'm') * .5), /* 1 */
-    width: 25vw,
-    max: round(map-get($euiBreakpoints, 's') * .7),
-  ),
-  'medium': (
-    // Calculated for forms plus padding
-    min: $euiFormMaxWidth + ($euiSizeM * 2),
-    width: 50vw,
-    max: map-get($euiBreakpoints, 'm'),
-  ),
-  'large': (
-    min:  round(map-get($euiBreakpoints, 'm') * .9), /* 1 */
-    width: 75vw,
-    max: map-get($euiBreakpoints, 'l'),
-  )
-);
-
-@each $name, $sizing in $flyoutSizes {
-  .euiFlyout--#{$name} {
-    min-width: map-get($sizing, min);
-    width: map-get($sizing, width);
-
-    &.euiFlyout--maxWidth-default {
-      max-width: map-get($sizing, max);
-    }
-  }
-}
-
-@each $modifier, $paddingAmount in $euiFlyoutPaddingModifiers {
-  .euiFlyout--#{$modifier} {
-
-    .euiFlyoutHeader {
-      padding: $paddingAmount $paddingAmount 0;
-    }
-
-    .euiFlyoutHeader--hasBorder {
-      padding-bottom: $paddingAmount;
-    }
-
-    .euiFlyoutBody__overflowContent {
-      padding: $paddingAmount;
-    }
-
-    .euiFlyoutBody__banner .euiCallOut {
-      padding-left: $paddingAmount;
-      padding-right: $paddingAmount;
-    }
-
-    .euiFlyoutFooter {
-      @if $paddingAmount == $euiSizeL {
-        padding: ($paddingAmount / 1.5) $paddingAmount;
-      } @else if $paddingAmount == $euiSize {
-        padding: ($paddingAmount * .75) $paddingAmount;
-      } @else {
-        padding: $paddingAmount;
-      }
-    }
-  }
-}
-
-@keyframes euiFlyout {
-  0% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  75% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-/**
- * 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page
- * 2. If a custom maxWidth is set, we need to override it.
- */
-@include euiBreakpoint('xs', 's') {
-  // sass-lint:disable-block no-important
-  .euiFlyout {
-    max-width: 90vw !important; /* 1, 2 */
-  }
-
-  .euiFlyout--small {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'small'), 'min');
-  }
-
-  .euiFlyout--medium {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'medium'), 'min');
-  }
-
-  .euiFlyout--large {
-    min-width: 0;
-    width: map-get(map-get($flyoutSizes, 'large'), 'min');
-  }
-
-  // Pull in close buttons a little
-  .euiFlyout__closeButton--outside {
-    // Override the hover and focus transitions of buttons
-    // sass-lint:disable-block no-important
-    transform: translateX(calc(-100% - #{$euiSizeXS})) !important;
-
-    .euiFlyout--left & {
-      transform: translateX(calc(100% + #{$euiSizeXS})) !important;
-    }
-  }
-}
-
-/**
- * Left side flyout (should only be used for navigation)
- */
-.euiFlyout--left {
-  border-right: $euiFlyoutBorder;
-  border-left: none;
-  right: auto;
-  left: 0;
-  clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
-  animation-name: euiFlyoutLeft;
-}
-
-// Specific keyframes so in comes in from the left
-@keyframes euiFlyoutLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  75% {
-    opacity: 1;
-    transform: translateX(0%);
-  }
-}
-
-/**
- * Pushed style (inside body)
- */
-.euiFlyout.euiFlyout--push {
-  box-shadow: none;
-  clip-path: none;
-  animation-duration: 0s; // Don't animate on loading a docked nav
-  border-left: $euiBorderThick;
-  z-index: $euiZHeader - 1; // Make sure the header shadows are above
-
-  &.euiFlyout--left {
-    border-left: none;
-    border-right: $euiBorderThick;
-  }
-}
diff --git a/src/components/flyout/_flyout_body.scss b/src/components/flyout/_flyout_body.scss
deleted file mode 100644
index c4246605d48..00000000000
--- a/src/components/flyout/_flyout_body.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.euiFlyoutBody {
-  flex-grow: 1;
-  overflow-y: hidden;
-  height: 100%;
-
-  .euiFlyoutBody__overflow {
-    @include euiYScrollWithShadows;
-
-    &.euiFlyoutBody__overflow--hasBanner {
-      @include euiOverflowShadow('y', 'end');
-    }
-  }
-
-  .euiFlyoutBody__banner .euiCallOut {
-    border: none; // Remove border from callout when it is a flyout banner
-    border-radius: 0; // Ensures no border-radius in all themes
-  }
-}
diff --git a/src/components/flyout/_flyout_footer.scss b/src/components/flyout/_flyout_footer.scss
deleted file mode 100644
index ea6a0cdbe96..00000000000
--- a/src/components/flyout/_flyout_footer.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.euiFlyoutFooter {
-  background: $euiColorLightestShade;
-  flex-grow: 0;
-}
diff --git a/src/components/flyout/_flyout_header.scss b/src/components/flyout/_flyout_header.scss
deleted file mode 100644
index e0ab922f5e3..00000000000
--- a/src/components/flyout/_flyout_header.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.euiFlyoutHeader {
-  flex-grow: 0;
-}
-
-.euiFlyoutHeader--hasBorder {
-  border-bottom: $euiBorderThin;
-}
diff --git a/src/components/flyout/_index.scss b/src/components/flyout/_index.scss
deleted file mode 100644
index e45a386c3ae..00000000000
--- a/src/components/flyout/_index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-@import 'flyout';
-@import 'flyout_body';
-@import 'flyout_footer';
-@import 'flyout_header';
diff --git a/src/components/flyout/_mixins.scss b/src/components/flyout/_mixins.scss
deleted file mode 100644
index 9ab5d09aefb..00000000000
--- a/src/components/flyout/_mixins.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-@mixin euiFlyout {
-  border-left: $euiFlyoutBorder;
-  // The mixin augments the above
-  // sass-lint:disable mixins-before-declarations
-  @include euiBottomShadowLarge;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  height: 100%;
-  z-index: $euiZFlyout;
-  background: $euiColorEmptyShade;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
-}
diff --git a/src/components/flyout/_variables.scss b/src/components/flyout/_variables.scss
deleted file mode 100644
index cbfe07c7e3b..00000000000
--- a/src/components/flyout/_variables.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$euiFlyoutBorder: $euiBorderThin !default;
-
-$euiFlyoutPaddingModifiers: (
-  'paddingNone': 0,
-  'paddingSmall': $euiSizeS,
-  'paddingMedium': $euiSize,
-  'paddingLarge': $euiSizeL
-) !default;
\ No newline at end of file
diff --git a/src/components/flyout/flyout.styles.ts b/src/components/flyout/flyout.styles.ts
new file mode 100644
index 00000000000..f612ad113cf
--- /dev/null
+++ b/src/components/flyout/flyout.styles.ts
@@ -0,0 +1,276 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { _EuiFlyoutPaddingSize, EuiFlyoutSize } from './flyout';
+import {
+  euiCanAnimate,
+  euiBreakpoint,
+  logicalCSS,
+  mathWithUnits,
+} from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
+import { transparentize } from '../../services/color';
+import { euiFormMaxWidth } from '../form/form.styles';
+
+const euiFlyoutSlideInRight = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  75% {
+    opacity: 1;
+    transform: translateX(0%);
+  }
+`;
+
+const euiFlyoutSlideInLeft = keyframes`
+  0% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  75% {
+    opacity: 1;
+    transform: translateX(0%);
+}
+`;
+
+export const euiFlyoutCloseButtonStyles = (euiThemeContext: UseEuiTheme) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  return {
+    euiFlyout__closeButton: css`
+      position: absolute;
+      ${logicalCSS('right', euiTheme.size.s)}
+      ${logicalCSS('top', euiTheme.size.s)}
+      z-index: 3;
+    `,
+    inside: css`
+      background-color: ${transparentize(euiTheme.colors.emptyShade, 0.9)};
+    `,
+    outside: css`
+      // Match dropshadow
+      ${euiShadowXLarge(euiThemeContext)};
+      // Override the hover and focus transitions of buttons
+      animation: none !important;
+    `,
+    outsideSide: {
+      // `transforms` pull in close buttons a little
+      // `!important` is necessary here to override the hover/focus transitions of buttons
+      right: css`
+        ${logicalCSS('left', 0)}
+
+        ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+          transform: translateX(calc(-100% - ${euiTheme.size.l})) !important;
+        }
+        ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+          transform: translateX(calc(-100% - ${euiTheme.size.xs})) !important;
+        }
+      `,
+      left: css`
+        ${logicalCSS('right', 0)}
+
+        ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+          transform: translateX(calc(100% + ${euiTheme.size.l})) !important;
+        }
+        ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+          transform: translateX(calc(100% + ${euiTheme.size.xs})) !important;
+        }
+      `,
+    },
+  };
+};
+
+export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  return {
+    euiFlyout: css`
+      position: fixed;
+      ${logicalCSS('top', 0)}
+      ${logicalCSS('bottom', 0)}
+      ${logicalCSS('height', '100%')}
+      z-index: ${euiTheme.levels.flyout};
+      background: ${euiTheme.colors.emptyShade};
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+
+      &:focus {
+        // Remove focus ring because of tabindex=0
+        outline: none;
+      }
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        // 1. Leave only a small sliver exposed on small screens so users understand that this is not a new page
+        // 2. If a custom maxWidth is set, we need to override it.
+        ${logicalCSS('max-width', '90vw !important')}
+      }
+    `,
+
+    // Flyout sizes
+    s: css`
+      ${composeFlyoutSizing(euiThemeContext, 's')}
+    `,
+    m: css`
+      ${composeFlyoutSizing(euiThemeContext, 'm')}
+    `,
+    l: css`
+      ${composeFlyoutSizing(euiThemeContext, 'l')}
+    `,
+    noMaxWidth: css`
+      ${logicalCSS('max-width', 'none')}
+    `,
+
+    // Side
+    right: css`
+      clip-path: polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);
+      ${logicalCSS('right', 0)}
+
+      ${euiCanAnimate} {
+        animation: ${euiFlyoutSlideInRight} ${euiTheme.animation.normal}
+          ${euiTheme.animation.resistance};
+      }
+    `,
+    // Left-side flyouts should only be used for navigation
+    left: css`
+      ${logicalCSS('left', 0)}
+      clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%);
+
+      ${euiCanAnimate} {
+        animation: ${euiFlyoutSlideInLeft};
+      }
+    `,
+
+    // Type
+    overlay: css`
+      ${euiShadowXLarge(euiThemeContext)};
+    `,
+    push: css`
+      clip-path: none;
+      // Don't animate on loading a docked nav
+      animation-duration: 0s !important;
+      // Make sure the header shadows are above
+      z-index: ${Number(euiTheme.levels.flyout) - 1};
+    `,
+    pushSide: {
+      right: css`
+        ${logicalCSS('border-left', euiTheme.border.thick)}
+      `,
+      left: css`
+        ${logicalCSS('border-right', euiTheme.border.thick)}
+      `,
+    },
+
+    // Padding
+    paddingSizes: {
+      none: css`
+        ${composeFlyoutPadding(euiThemeContext, 'none')}
+      `,
+      s: css`
+        ${composeFlyoutPadding(euiThemeContext, 's')}
+      `,
+      m: css`
+        ${composeFlyoutPadding(euiThemeContext, 'm')}
+      `,
+      l: css`
+        ${composeFlyoutPadding(euiThemeContext, 'l')}
+      `,
+    },
+  };
+};
+
+const composeFlyoutSizing = (
+  euiThemeContext: UseEuiTheme,
+  size: EuiFlyoutSize
+) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  // 1. Calculating the minimum width based on the screen takeover breakpoint
+  const flyoutSizes = {
+    s: {
+      min: `${Math.round(euiTheme.breakpoint.m * 0.5)}px`, // 1.
+      width: '25vw',
+      max: `${Math.round(euiTheme.breakpoint.s * 0.7)}px`,
+    },
+
+    m: {
+      // Calculated for forms plus padding
+      min: `${mathWithUnits(euiFormMaxWidth(euiThemeContext), (x) => x + 24)}`,
+      width: '50vw',
+      max: `${euiTheme.breakpoint.m}px`,
+    },
+
+    l: {
+      min: `${Math.round(euiTheme.breakpoint.m * 0.9)}px`, // 1.
+      width: '75vw',
+      max: `${euiTheme.breakpoint.l}px`,
+    },
+  };
+
+  return `
+    ${logicalCSS('max-width', flyoutSizes[size].max)}
+
+    ${euiBreakpoint(euiThemeContext, ['m', 'xl'])} {
+      ${logicalCSS('min-width', flyoutSizes[size].min)}
+      ${logicalCSS('width', flyoutSizes[size].width)}
+    }
+    ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+      ${logicalCSS('min-width', 0)}
+      ${logicalCSS('width', flyoutSizes[size].min)}
+    }
+  `;
+};
+
+const composeFlyoutPadding = (
+  euiThemeContext: UseEuiTheme,
+  paddingSize: _EuiFlyoutPaddingSize
+) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  const paddingModifierMap = {
+    none: 0,
+    s: euiTheme.size.s,
+    m: euiTheme.size.base,
+    l: euiTheme.size.l,
+  };
+
+  // Footer padding
+  const footerPaddingSizes = {
+    none: 0,
+    s: euiTheme.size.s,
+    m: `${mathWithUnits(euiTheme.size.base, (x) => x * 0.75)} ${
+      euiTheme.size.base
+    };`,
+    l: `${mathWithUnits(euiTheme.size.l, (x) => x / 1.5)} ${euiTheme.size.l};`,
+  };
+
+  return `
+    .euiFlyoutHeader {
+      ${logicalCSS('padding-horizontal', paddingModifierMap[paddingSize])}
+      ${logicalCSS('padding-top', paddingModifierMap[paddingSize])}
+    }
+
+    [class*='euiFlyoutHeader-hasBorder'] {
+      ${logicalCSS('padding-bottom', paddingModifierMap[paddingSize])}
+    }
+
+    .euiFlyoutBody__overflowContent {
+      padding: ${paddingModifierMap[paddingSize]};
+    }
+
+    .euiFlyoutBody__banner .euiCallOut {
+      ${logicalCSS('padding-horizontal', paddingModifierMap[paddingSize])}
+    }
+
+    .euiFlyoutFooter {
+      padding: ${footerPaddingSizes[paddingSize]};
+    }
+  `;
+};
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 6c301f1d9ea..b4c7a0bd247 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -27,9 +27,11 @@ import {
   useCombinedRefs,
   EuiBreakpointSize,
   useIsWithinMinBreakpoint,
+  useEuiTheme,
 } from '../../services';
+import { logicalStyle } from '../../global_styling';
 
-import { CommonProps, keysOf, PropsOfElement } from '../common';
+import { CommonProps, PropsOfElement } from '../common';
 import { EuiFocusTrap, EuiFocusTrapProps } from '../focus_trap';
 import { EuiOverlayMask, EuiOverlayMaskProps } from '../overlay_mask';
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button';
@@ -37,29 +39,15 @@ import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
 
-const typeToClassNameMap = {
-  push: 'euiFlyout--push',
-  overlay: null,
-};
+import { euiFlyoutStyles, euiFlyoutCloseButtonStyles } from './flyout.styles';
 
-export const TYPES = keysOf(typeToClassNameMap);
+export const TYPES = ['push', 'overlay'] as const;
 type _EuiFlyoutType = typeof TYPES[number];
 
-const sideToClassNameMap = {
-  left: 'euiFlyout--left',
-  right: null,
-};
-
-export const SIDES = keysOf(sideToClassNameMap);
+export const SIDES = ['left', 'right'] as const;
 type _EuiFlyoutSide = typeof SIDES[number];
 
-const sizeToClassNameMap = {
-  s: 'euiFlyout--small',
-  m: 'euiFlyout--medium',
-  l: 'euiFlyout--large',
-};
-
-export const SIZES = keysOf(sizeToClassNameMap);
+export const SIZES = ['s', 'm', 'l'] as const;
 export type EuiFlyoutSize = typeof SIZES[number];
 
 /**
@@ -70,21 +58,15 @@ function isEuiFlyoutSizeNamed(value: any): value is EuiFlyoutSize {
   return SIZES.includes(value as any);
 }
 
-const paddingSizeToClassNameMap = {
-  none: 'euiFlyout--paddingNone',
-  s: 'euiFlyout--paddingSmall',
-  m: 'euiFlyout--paddingMedium',
-  l: 'euiFlyout--paddingLarge',
-};
-
-export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
-type _EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
+export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const;
+export type _EuiFlyoutPaddingSize = typeof PADDING_SIZES[number];
 
 interface _EuiFlyoutProps {
   onClose: (event: MouseEvent | TouchEvent | KeyboardEvent) => void;
   /**
    * Defines the width of the panel.
    * Pass a predefined size of `s | m | l`, or pass any number/string compatible with the CSS `width` attribute
+   * @default m
    */
   size?: EuiFlyoutSize | CSSProperties['width'];
   /**
@@ -93,23 +75,27 @@ interface _EuiFlyoutProps {
    * set to `false` to not restrict the width,
    * set to a number for a custom width in px,
    * set to a string for a custom width in custom measurement.
+   * @default false
    */
   maxWidth?: boolean | number | string;
   /**
    * Customize the padding around the content of the flyout header, body and footer
+   * @default l
    */
   paddingSize?: _EuiFlyoutPaddingSize;
   /**
    * Adds an EuiOverlayMask and wraps in an EuiPortal
+   * @default true
    */
   ownFocus?: boolean;
   /**
    * Hides the default close button. You must provide another close button somewhere within the flyout.
+   * @default false
    */
   hideCloseButton?: boolean;
   /**
-   * Specify an aria-label for the close button of the flyout.
-   * Default is `'Close this dialog'`.
+   * Specify a custom aria-label for the close button of the flyout.
+   * @default "Close this dialog"
    */
   closeButtonAriaLabel?: string;
   /**
@@ -120,6 +106,7 @@ interface _EuiFlyoutProps {
    * Position of close button.
    * `inside`: Floating to just inside the flyout, always top right;
    * `outside`: Floating just outside the flyout near the top (side dependent on `side`). Helpful when the close button may cover other interactable content.
+   * @default inside
    */
   closeButtonPosition?: 'inside' | 'outside';
   /**
@@ -129,6 +116,7 @@ interface _EuiFlyoutProps {
   /**
    * How to display the the flyout in relation to the body content;
    * `push` keeps it visible, pushing the `<body>` content via padding
+   * @default overlay
    */
   type?: _EuiFlyoutType;
   /**
@@ -139,15 +127,18 @@ interface _EuiFlyoutProps {
   /**
    * Which side of the window to attach to.
    * The `left` option should only be used for navigation.
+   * @default right
    */
   side?: _EuiFlyoutSide;
   /**
    * Defaults to `dialog` which is best for most cases of the flyout.
    * Otherwise pass in your own, aria-role, or `null` to remove it and use the semantic `as` element instead
+   * @default dialog
    */
   role?: null | string;
   /**
    * Named breakpoint (`xs` through `xl`) for customizing the minimum window width to enable the `push` type
+   * @default l
    */
   pushMinBreakpoint?: EuiBreakpointSize;
   style?: CSSProperties;
@@ -262,49 +253,53 @@ export const EuiFlyout = forwardRef(
       }
     };
 
-    let newStyle;
-    let widthClassName;
-    let sizeClassName;
-
-    // Setting max-width
-    if (maxWidth === true) {
-      widthClassName = 'euiFlyout--maxWidth-default';
-    } else if (maxWidth !== false) {
-      const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
-      newStyle = { ...style, maxWidth: value };
+    /**
+     * Set inline styles
+     */
+    let newStyle = style;
+    if (typeof maxWidth !== 'boolean') {
+      newStyle = { ...newStyle, ...logicalStyle('max-width', maxWidth) };
     }
-
-    // Setting size
-    if (isEuiFlyoutSizeNamed(size)) {
-      sizeClassName = sizeToClassNameMap[size];
-    } else if (newStyle) {
-      newStyle.width = size;
-    } else {
-      newStyle = { ...style, width: size };
+    if (!isEuiFlyoutSizeNamed(size)) {
+      newStyle = { ...newStyle, ...logicalStyle('width', size) };
     }
 
-    const classes = classnames(
-      'euiFlyout',
-      typeToClassNameMap[type as _EuiFlyoutType],
-      sideToClassNameMap[side as _EuiFlyoutSide],
-      sizeClassName,
-      paddingSizeToClassNameMap[paddingSize as _EuiFlyoutPaddingSize],
-      widthClassName,
-      className
-    );
+    const euiTheme = useEuiTheme();
+    const styles = euiFlyoutStyles(euiTheme);
+
+    const cssStyles = [
+      styles.euiFlyout,
+      styles.paddingSizes[paddingSize],
+      isEuiFlyoutSizeNamed(size) && styles[size],
+      maxWidth === false && styles.noMaxWidth,
+      styles[type],
+      type === 'push' && styles.pushSide[side],
+      styles[side],
+    ];
+
+    const classes = classnames('euiFlyout', className);
 
     let closeButton;
     if (onClose && !hideCloseButton) {
       const closeButtonClasses = classnames(
         'euiFlyout__closeButton',
-        `euiFlyout__closeButton--${closeButtonPosition}`,
         closeButtonProps?.className
       );
 
+      const closeButtonStyles = euiFlyoutCloseButtonStyles(euiTheme);
+
+      const closeButtonCssStyles = [
+        closeButtonStyles.euiFlyout__closeButton,
+        closeButtonStyles[closeButtonPosition],
+        closeButtonPosition === 'outside' &&
+          closeButtonStyles.outsideSide[side],
+      ];
+
       closeButton = (
         <EuiI18n token="euiFlyout.closeAriaLabel" default="Close this dialog">
           {(closeAriaLabel: string) => (
             <EuiButtonIcon
+              css={closeButtonCssStyles}
               display={closeButtonPosition === 'outside' ? 'fill' : 'empty'}
               iconType="cross"
               color="text"
@@ -360,8 +355,9 @@ export const EuiFlyout = forwardRef(
           role={role}
           className={classes}
           tabIndex={-1}
-          style={newStyle || style}
+          style={newStyle}
           ref={setRef}
+          css={cssStyles}
         >
           {closeButton}
           {children}
diff --git a/src/components/flyout/flyout_body.styles.ts b/src/components/flyout/flyout_body.styles.ts
new file mode 100644
index 00000000000..8823ca796e2
--- /dev/null
+++ b/src/components/flyout/flyout_body.styles.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+import {
+  logicalCSS,
+  logicalCSSWithFallback,
+  euiYScrollWithShadows,
+} from '../../global_styling';
+
+export const euiFlyoutBodyStyles = (euiThemeContext: UseEuiTheme) => {
+  return {
+    euiFlyoutBody: css`
+      ${logicalCSSWithFallback('overflow-y', 'hidden')}
+      ${logicalCSS('height', '100%')}
+    `,
+    euiFlyoutBody__overflow: {
+      noBanner: css`
+        ${euiYScrollWithShadows(euiThemeContext)};
+      `,
+      hasBanner: css`
+        ${euiYScrollWithShadows(euiThemeContext, { side: 'end' })};
+      `,
+    },
+    euiFlyoutBody__banner: css`
+      ${logicalCSSWithFallback('overflow-x', 'hidden')}
+    `,
+  };
+};
diff --git a/src/components/flyout/flyout_body.tsx b/src/components/flyout/flyout_body.tsx
index 35fd8c4e900..097231d3f3e 100644
--- a/src/components/flyout/flyout_body.tsx
+++ b/src/components/flyout/flyout_body.tsx
@@ -9,6 +9,8 @@
 import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services';
+import { euiFlyoutBodyStyles } from './flyout_body.styles';
 
 export type EuiFlyoutBodyProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> &
@@ -27,14 +29,30 @@ export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
   ...rest
 }) => {
   const classes = classNames('euiFlyoutBody', className);
-  const overflowClasses = classNames('euiFlyoutBody__overflow', {
-    'euiFlyoutBody__overflow--hasBanner': banner,
-  });
+
+  const euiTheme = useEuiTheme();
+  const styles = euiFlyoutBodyStyles(euiTheme);
+
+  const cssStyles = [styles.euiFlyoutBody];
+  const bannerCssStyles = [banner && styles.euiFlyoutBody__banner];
+  const overflowCssStyles = [
+    banner
+      ? styles.euiFlyoutBody__overflow.hasBanner
+      : styles.euiFlyoutBody__overflow.noBanner,
+  ];
 
   return (
-    <div className={classes} {...rest}>
-      <div tabIndex={0} className={overflowClasses}>
-        {banner && <div className="euiFlyoutBody__banner">{banner}</div>}
+    <div className={classes} {...rest} css={cssStyles}>
+      <div
+        tabIndex={0}
+        className="euiFlyoutBody__overflow"
+        css={overflowCssStyles}
+      >
+        {banner && (
+          <div className="euiFlyoutBody__banner" css={bannerCssStyles}>
+            {banner}
+          </div>
+        )}
         <div className="euiFlyoutBody__overflowContent">{children}</div>
       </div>
     </div>
diff --git a/src/components/flyout/flyout_footer.styles.ts b/src/components/flyout/flyout_footer.styles.ts
new file mode 100644
index 00000000000..8cb5b41ac31
--- /dev/null
+++ b/src/components/flyout/flyout_footer.styles.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiFlyoutFooterStyles = (euiThemeContext: UseEuiTheme) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  return {
+    euiFlyoutFooter: css`
+      background-color: ${euiTheme.colors.lightestShade};
+      flex-grow: 0;
+    `,
+  };
+};
diff --git a/src/components/flyout/flyout_footer.tsx b/src/components/flyout/flyout_footer.tsx
index dded20a7a5f..6482bbb25d3 100644
--- a/src/components/flyout/flyout_footer.tsx
+++ b/src/components/flyout/flyout_footer.tsx
@@ -9,6 +9,8 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services';
+import { euiFlyoutFooterStyles } from './flyout_footer.styles';
 
 export type EuiFlyoutFooterProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
@@ -21,8 +23,13 @@ export const EuiFlyoutFooter: EuiFlyoutFooterProps = ({
 }) => {
   const classes = classNames('euiFlyoutFooter', className);
 
+  const euiTheme = useEuiTheme();
+  const styles = euiFlyoutFooterStyles(euiTheme);
+
+  const cssStyles = [styles.euiFlyoutFooter];
+
   return (
-    <div className={classes} {...rest}>
+    <div className={classes} {...rest} css={cssStyles}>
       {children}
     </div>
   );
diff --git a/src/components/flyout/flyout_header.styles.ts b/src/components/flyout/flyout_header.styles.ts
new file mode 100644
index 00000000000..f5571701ab6
--- /dev/null
+++ b/src/components/flyout/flyout_header.styles.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+import { logicalCSS } from '../../global_styling';
+
+export const euiFlyoutHeaderStyles = (euiThemeContext: UseEuiTheme) => {
+  const euiTheme = euiThemeContext.euiTheme;
+
+  return {
+    euiFlyoutHeader: css`
+      flex-grow: 0;
+    `,
+    hasBorder: css`
+      ${logicalCSS('border-bottom', euiTheme.border.thin)}
+    `,
+  };
+};
diff --git a/src/components/flyout/flyout_header.tsx b/src/components/flyout/flyout_header.tsx
index 0b4cf899640..c3833797036 100644
--- a/src/components/flyout/flyout_header.tsx
+++ b/src/components/flyout/flyout_header.tsx
@@ -9,6 +9,8 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services';
+import { euiFlyoutHeaderStyles } from './flyout_header.styles';
 
 export type EuiFlyoutHeaderProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> &
@@ -23,16 +25,15 @@ export const EuiFlyoutHeader: EuiFlyoutHeaderProps = ({
   hasBorder = false,
   ...rest
 }) => {
-  const classes = classNames(
-    'euiFlyoutHeader',
-    {
-      'euiFlyoutHeader--hasBorder': hasBorder,
-    },
-    className
-  );
+  const classes = classNames('euiFlyoutHeader', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiFlyoutHeaderStyles(euiTheme);
+
+  const cssStyles = [styles.euiFlyoutHeader, hasBorder && styles.hasBorder];
 
   return (
-    <div className={classes} {...rest}>
+    <div className={classes} {...rest} css={cssStyles}>
       {children}
     </div>
   );
diff --git a/src/components/index.scss b/src/components/index.scss
index 18135cfd9aa..1acd7b1eedb 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -16,7 +16,6 @@
 @import 'empty_prompt/index';
 @import 'filter_group/index';
 @import 'flex/index';
-@import 'flyout/index';
 @import 'form/index';
 @import 'header/index';
 @import 'key_pad_menu/index';
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index 7d6ce5f2acc..c5829a646e0 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -145,12 +145,15 @@ export const useEuiYScroll = ({ height }: _EuiYScroll = {}) => {
   return euiYScroll(euiTheme, { height });
 };
 
+interface _EuiYScrollWithShadows extends _EuiYScroll {
+  side?: 'both' | 'start' | 'end';
+}
 export const euiYScrollWithShadows = (
   euiTheme: UseEuiTheme,
-  { height }: _EuiYScroll = {}
+  { height, side = 'both' }: _EuiYScrollWithShadows = {}
 ) => `
   ${euiYScroll(euiTheme, { height })}
-  ${euiOverflowShadowStyles(euiTheme, { direction: 'y' })}
+  ${euiOverflowShadowStyles(euiTheme, { direction: 'y', side })}
 `;
 export const useEuiYScrollWithShadows = ({ height }: _EuiYScroll = {}) => {
   const euiTheme = useEuiTheme();
diff --git a/src/themes/amsterdam/global_styling/variables/_flyout.scss b/src/themes/amsterdam/global_styling/variables/_flyout.scss
deleted file mode 100644
index 40cd9e41bb4..00000000000
--- a/src/themes/amsterdam/global_styling/variables/_flyout.scss
+++ /dev/null
@@ -1 +0,0 @@
-$euiFlyoutBorder: none;
diff --git a/src/themes/amsterdam/global_styling/variables/_index.scss b/src/themes/amsterdam/global_styling/variables/_index.scss
index 5148cd7d551..04d1e09732f 100644
--- a/src/themes/amsterdam/global_styling/variables/_index.scss
+++ b/src/themes/amsterdam/global_styling/variables/_index.scss
@@ -4,7 +4,6 @@
 
 @import 'buttons';
 @import 'borders';
-@import 'flyout';
 @import 'form';
 @import 'header';
 @import 'page';
diff --git a/upcoming_changelogs/6213.md b/upcoming_changelogs/6213.md
new file mode 100644
index 00000000000..267dbd9e747
--- /dev/null
+++ b/upcoming_changelogs/6213.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiFlyout` to Emotion; Removed `$euiFlyoutBorder` and `$euiFlyoutPaddingModifiers`
\ No newline at end of file