[Markdown] migrate scss to emotion (#216351)

## Summary

Part of https://github.com/elastic/kibana/issues/207852
Migrates markdown to emotion.

packages/kbn-optimizer/limits.yml

@@ -187,7 +187,7 @@ pageLoadAssetSize:
   visDefaultEditor: 50178
   visTypeGauge: 24113
   visTypeHeatmap: 25340
-  visTypeMarkdown: 30896
+  visTypeMarkdown: 9000
   visTypeMetric: 23332
   visTypePie: 35583
   visTypeTable: 94934

src/platform/plugins/private/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap

@@ -2,6 +2,27 @@
 
 exports[`MarkdownOptions should match snapshot 1`] = `
 <EuiPanel
+  css={
+    Object {
+      "map": undefined,
+      "name": "18sw4aj",
+      "next": undefined,
+      "styles": "
+        flex-grow: 1 !important;
+        .visEditor--markdown__textarea {
+          flex-grow: 1;
+        }
+
+        .mkdEditor,
+        .euiFormControlLayout__childrenWrapper,
+        .euiFormControlLayout--euiTextArea,
+        .visEditor--markdown__textarea {
+          height: 100%;
+        }
+      ",
+      "toString": [Function],
+    }
+  }
   paddingSize="s"
 >
   <EuiFlexGroup

src/platform/plugins/private/vis_type_markdown/public/markdown_options.tsx

@@ -20,6 +20,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n-react';
 
 import { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
+import { css } from '@emotion/react';
 import { MarkdownVisParams } from './types';
 
 function MarkdownOptions({ stateParams, setValue }: VisEditorOptionsProps<MarkdownVisParams>) {
@@ -29,7 +30,22 @@ function MarkdownOptions({ stateParams, setValue }: VisEditorOptionsProps<Markdo
   );
 
   return (
-    <EuiPanel paddingSize="s">
+    <EuiPanel
+      paddingSize="s"
+      css={css`
+        flex-grow: 1 !important;
+        .visEditor--markdown__textarea {
+          flex-grow: 1;
+        }
+
+        .mkdEditor,
+        .euiFormControlLayout__childrenWrapper,
+        .euiFormControlLayout--euiTextArea,
+        .visEditor--markdown__textarea {
+          height: 100%;
+        }
+      `}
+    >
       <EuiFlexGroup direction="column" gutterSize="m" className="mkdEditor">
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="baseline">

src/platform/plugins/private/vis_type_markdown/public/markdown_vis.scss

@@ -1,25 +0,0 @@
-// Prefix all styles with "mkd" to avoid conflicts.
-// Examples
-//   mkdChart
-//   mkdChart__legend
-//   mkdChart__legend--small
-//   mkdChart__legend-isLoading
-
-.mkdVis {
-  padding: $euiSizeS;
-  width: 100%;
-}
-
-.visEditor--markdown {
-  .visEditorSidebar__config > *,
-  .visEditor--markdown__textarea {
-    flex-grow: 1;
-  }
-
-  .mkdEditor,
-  .euiFormControlLayout__childrenWrapper,
-  .euiFormControlLayout--euiTextArea,
-  .visEditor--markdown__textarea {
-    height: 100%
-  }
-}

src/platform/plugins/private/vis_type_markdown/public/markdown_vis_controller.tsx

@@ -9,9 +9,10 @@
 
 import React, { useEffect } from 'react';
 import { Markdown } from '@kbn/kibana-react-plugin/public';
-import { MarkdownVisParams } from './types';
 
-import './markdown_vis.scss';
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { MarkdownVisParams } from './types';
 
 interface MarkdownVisComponentProps extends MarkdownVisParams {
   renderComplete: () => void;
@@ -23,10 +24,17 @@ const MarkdownVisComponent = ({
   openLinksInNewTab,
   renderComplete,
 }: MarkdownVisComponentProps) => {
+  const { euiTheme } = useEuiTheme();
   useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering.
 
   return (
-    <div className="mkdVis" style={{ fontSize: `${fontSize}pt` }}>
+    <div
+      css={css({
+        fontSize: `${fontSize}pt`,
+        padding: euiTheme.size.s,
+        width: '100%',
+      })}
+    >
       <Markdown
         data-test-subj="markdownBody"
         openLinksInNewTab={openLinksInNewTab}

src/platform/plugins/private/vis_type_markdown/public/settings_options.tsx

@@ -13,11 +13,17 @@ import { i18n } from '@kbn/i18n';
 
 import { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
 import { SwitchOption, RangeOption } from '@kbn/vis-default-editor-plugin/public';
+import { css } from '@emotion/react';
 import { MarkdownVisParams } from './types';
 
 function SettingsOptions({ stateParams, setValue }: VisEditorOptionsProps<MarkdownVisParams>) {
   return (
-    <EuiPanel paddingSize="s">
+    <EuiPanel
+      paddingSize="s"
+      css={css`
+        flex-grow: 1 !important;
+      `}
+    >
       <RangeOption
         label={i18n.translate('visTypeMarkdown.params.fontSizeLabel', {
           defaultMessage: 'Base font size in points',