Replace Sass @euiButton mixin usage with CSS-in-JS (#194621)

## Summary

This PR removes a Sass mixin usage that is shortly to be
deprecated/removed from EUI.

I think this somewhat addresses #122594 / #122556 but to be honest I'm
not 100% sure what's going on with that meta issue 😅

### QA

| Before | After |
|--------|--------|
| <img width="231" alt=""
src="https://github.com/user-attachments/assets/578ea6d8-1dce-4daa-9e3d-e1aac7079ec3">
| <img width="260" alt=""
src="https://github.com/user-attachments/assets/482aa5a1-ed0c-4252-95b0-8b324628cb6c">
|

Note that the height of the button has changed from prod, but from what
I can tell this is actually correct and was previously broken on
production. Hover/focus styles should remain the same compared to
production.

- `yarn storybook shared_ux`
- Go to
http://localhost:9001/?path=/story/button-exit-full-screen-button--exit-full-screen-button

### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

packages/shared-ux/button/exit_full_screen/package.json

@@ -2,6 +2,5 @@
   "name": "@kbn/shared-ux-button-exit-full-screen",
   "private": true,
   "version": "1.0.0",
-  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
-  "sideEffects": ["*.scss"]
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
 }

packages/shared-ux/button/exit_full_screen/src/__snapshots__/exit_full_screen_button.test.tsx.snap

@@ -10,7 +10,13 @@ exports[`<ExitFullScreenButton /> with kibana services is rendered 1`] = `
   </p>
   <button
     class="exitFullScreenButton"
-    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
+box-shadow:
+  0 1px 5px rgba(0,0,0,0.1),
+  0 3.6px 13px rgba(0,0,0,0.07),
+  0 8.4px 23px rgba(0,0,0,0.06),
+  0 23px 35px rgba(0,0,0,0.05);
+,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="exitFullScreenModeButton"
   >
     <span
@@ -51,7 +57,13 @@ exports[`<ExitFullScreenButton /> with kibana services renders custom logo 1`] =
   </p>
   <button
     class="exitFullScreenButton"
-    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
+box-shadow:
+  0 1px 5px rgba(0,0,0,0.1),
+  0 3.6px 13px rgba(0,0,0,0.07),
+  0 8.4px 23px rgba(0,0,0,0.06),
+  0 23px 35px rgba(0,0,0,0.05);
+,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="exitFullScreenModeButton"
   >
     <span
@@ -99,7 +111,13 @@ exports[`<ExitFullScreenButton /> with manual services is rendered 1`] = `
   </p>
   <button
     class="exitFullScreenButton"
-    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
+box-shadow:
+  0 1px 5px rgba(0,0,0,0.1),
+  0 3.6px 13px rgba(0,0,0,0.07),
+  0 8.4px 23px rgba(0,0,0,0.06),
+  0 23px 35px rgba(0,0,0,0.05);
+,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="exitFullScreenModeButton"
   >
     <span

packages/shared-ux/button/exit_full_screen/src/exit_full_screen_button.component.tsx

@@ -15,16 +15,20 @@ import {
   EuiIcon,
   EuiImage,
   useEuiTheme,
+  useEuiShadow,
   makeHighContrastColor,
 } from '@elastic/eui';
+// EUI allows reaching into internal folders for component-specific exports, but they aren't typed in Kibana
+// @ts-ignore
+import { useEuiButtonFocusCSS } from '@elastic/eui/lib/themes/amsterdam/global_styling/mixins/button';
+// @ts-ignore
+import { euiButtonDisplayStyles } from '@elastic/eui/lib/components/button/button_display/_button_display.styles';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import cx from 'classnames';
 
 import type { ExitFullScreenButtonComponentProps as Props } from '../types';
 
-import './exit_full_screen_button.scss';
-
 const text = i18n.translate('sharedUXPackages.exitFullScreenButton.exitFullScreenModeButtonText', {
   defaultMessage: 'Exit full screen',
 });
@@ -40,17 +44,23 @@ const description = i18n.translate(
  * A presentational component that renders a button designed to exit "full screen" mode.
  */
 export const ExitFullScreenButton = ({ onClick, className, customLogo }: Props) => {
-  const { euiTheme } = useEuiTheme();
-  const { colors, size, border } = euiTheme;
+  const euiThemeContext = useEuiTheme();
+  const { euiButtonDisplay } = euiButtonDisplayStyles(euiThemeContext);
+  const { colors, size, border } = euiThemeContext.euiTheme;
 
-  const buttonCSS = css`
-    padding: ${size.xs} ${size.s};
-    background: ${colors.fullShade};
-    border-radius: ${border.radius.small};
-    height: ${size.xl};
-    color: ${makeHighContrastColor(colors.emptyShade)(colors.fullShade)};
-    outline-color: ${colors.emptyShade};
-  `;
+  const buttonCSS = [
+    euiButtonDisplay,
+    css`
+      padding: ${size.xs} ${size.s};
+      background: ${colors.fullShade};
+      border-radius: ${border.radius.small};
+      height: ${size.xl};
+      color: ${makeHighContrastColor(colors.emptyShade)(colors.fullShade)};
+      outline-color: ${colors.emptyShade};
+    `,
+    useEuiShadow('l'),
+    useEuiButtonFocusCSS(),
+  ];
 
   return (
     <div>

packages/shared-ux/button/exit_full_screen/src/exit_full_screen_button.scss

@@ -1,12 +0,0 @@
-
-/**
- * This file is a stop-gap measure to ensure that EUI mixins that haven't been converted from Emotion
- * are still applied.  This should be replaced once `EuiButton` and other mixin functionality are
- * fully converted to Emotion.
- *
- * see: https://github.com/elastic/kibana/issues/122594
- */
-.exitFullScreenButton {
-  @include euiButton;
-  @include euiBottomShadow;
-}