[EuiSideNav] Remove Sass mixin and replace with hasEmbellish prop

- for the medium breakpoint/collapsed EuiFlyout usage, this requires nesting an `EuiPageSidebar` in the flyout

- also requires some extra Security CSS selector tweaks

packages/shared-ux/page/solution_nav/src/solution_nav.scss

@@ -1,14 +1,15 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-@import '@elastic/eui/src/components/side_nav/mixins';
 @import 'variables';
 
 // Put the page background color in the flyout version too
 .kbnSolutionNav__flyout {
   background-color: $euiPageBackgroundColor;
+
+  .kbnSolutionNav {
+    flex: auto; // Override default EuiPageSideBar flex CSS when in a flyout
+  }
 }
 
 .kbnSolutionNav {
-  @include euiSideNavEmbellish;
   @include euiYScroll;
 
   display: flex;

packages/shared-ux/page/solution_nav/src/solution_nav.tsx

@@ -25,6 +25,7 @@ import {
   useIsWithinMinBreakpoint,
   useEuiTheme,
   useEuiThemeCSSVariables,
+  EuiPageSidebar,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -102,6 +103,7 @@ export const SolutionNav: FC<SolutionNavProps> = ({
   canBeCollapsed = true,
   ...rest
 }) => {
+  const euiThemeContext = useEuiTheme();
   const isSmallerBreakpoint = useIsWithinBreakpoints(mobileBreakpoints);
   const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
   const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
@@ -177,7 +179,7 @@ export const SolutionNav: FC<SolutionNavProps> = ({
     );
   }, [children, headingID, isCustomSideNav, isHidden, items, rest]);
 
-  const { euiTheme } = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
   const navWidth = useMemo(() => {
     if (isLargerBreakpoint) {
       return isOpenOnDesktop ? FLYOUT_SIZE_CSS : euiTheme.size.xxl;
@@ -234,11 +236,11 @@ export const SolutionNav: FC<SolutionNavProps> = ({
               className="kbnSolutionNav__flyout"
               hideCloseButton={!canBeCollapsed}
             >
-              <div className={sideNavClasses}>
+              <EuiPageSidebar className={sideNavClasses} hasEmbellish={true}>
                 {titleText}
                 <EuiSpacer size="l" />
                 {sideNavContent}
-              </div>
+              </EuiPageSidebar>
             </EuiFlyout>
           )}
           {canBeCollapsed && (

packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx

@@ -76,6 +76,7 @@ export const withSolutionNav = <P extends TemplateProps>(WrappedComponent: Compo
       ...props.pageSideBarProps,
       minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined,
       className: sideBarClasses,
+      hasEmbellish: !isSidebarShrunk,
     };
 
     return (

src/plugins/kibana_react/public/page_template/solution_nav/solution_nav.scss

@@ -1,13 +1,9 @@
-$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
-@import '@elastic/eui/src/components/side_nav/mixins';
-
 // Put the page background color in the flyout version too
 .kbnPageTemplateSolutionNav__flyout {
   background-color: $euiPageBackgroundColor;
 }
 
 .kbnPageTemplateSolutionNav {
-  @include euiSideNavEmbellish;
   @include euiYScroll;
 
   @include euiBreakpoint('m' ,'l', 'xl') {

x-pack/plugins/security_solution/public/app/home/template_wrapper/index.tsx

@@ -35,7 +35,7 @@ const StyledKibanaPageTemplate = styled(KibanaPageTemplate)<
     theme: EuiThemeComputed; // using computed EUI theme to be consistent with user profile theming
   }
 >`
-  .kbnSolutionNav {
+  .kbnSolutionNav__sidebar:not(.kbnSolutionNav__sidebar--shrink) {
     background-color: ${({ theme }) => theme.colors.emptyShade};
   }