[EuiSuperDatePicker] Convert quick select styles to Emotion

packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -1,25 +1,3 @@
-.euiQuickSelectPopover__panel {
-  &:not(:first-child) {
-    border-top: $euiBorderThin;
-    padding-top: $euiSizeM;
-    margin-top: $euiSizeM;
-  }
-
-  .euiQuickSelectPopover__panelTitle {
-    float: left;
-    margin-bottom: $euiSizeM;
-  }
-}
-
-.euiQuickSelectPopover__section {
-  @include euiScrollBar;
-  max-height: $euiSizeM * 11;
-  overflow: hidden;
-  overflow-y: auto;
-  margin: $euiSizeS 0 0;
-  clear: both;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;

packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts

@@ -0,0 +1,46 @@
+/*
+ * 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 {
+  euiScrollBarStyles,
+  logicalCSS,
+  logicalCSSWithFallback,
+  mathWithUnits,
+} from '../../../../global_styling';
+
+export const euiQuickSelectPanelStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiQuickSelectPanel: css`
+      &:not(:first-child) {
+        ${logicalCSS('border-top', euiTheme.border.thin)}
+        ${logicalCSS('padding-top', euiTheme.size.m)}
+        ${logicalCSS('margin-top', euiTheme.size.m)}
+      }
+    `,
+    euiQuickSelectPanel__title: css`
+      float: left; /* Required for fieldset/legend elements */
+      ${logicalCSS('margin-bottom', euiTheme.size.m)}
+    `,
+    euiQuickSelectPanel__section: css`
+      clear: both; /* Required for fieldset/legend elements */
+      ${logicalCSS('margin-top', euiTheme.size.s)}
+      ${logicalCSS(
+        'max-height',
+        mathWithUnits(euiTheme.size.m, (x) => x * 12)
+      )}
+      overflow: hidden;
+      ${logicalCSSWithFallback('overflow-y', 'auto')}
+      ${euiScrollBarStyles(euiThemeContext)}
+    `,
+  };
+};

packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 React, { FunctionComponent, ReactNode } from 'react';
+
+import { useEuiMemoizedStyles } from '../../../../services';
+import { EuiTitle } from '../../../title';
+import type { CommonProps } from '../../../common';
+
+import { euiQuickSelectPanelStyles } from './quick_select_panel.styles';
+
+type EuiQuickSelectPanelProps = CommonProps & {
+  component?: 'div' | 'fieldset';
+  title?: ReactNode;
+  titleId?: string;
+  children?: ReactNode;
+};
+
+export const EuiQuickSelectPanel: FunctionComponent<
+  EuiQuickSelectPanelProps
+> = ({ component: Component = 'div', title, titleId, children, ...rest }) => {
+  const isFieldset = Component === 'fieldset';
+  const TitleComponent = isFieldset ? 'legend' : 'span';
+
+  const styles = useEuiMemoizedStyles(euiQuickSelectPanelStyles);
+
+  return (
+    <Component css={styles.euiQuickSelectPanel} {...rest}>
+      {title ? (
+        <>
+          <EuiTitle size="xxxs">
+            <TitleComponent
+              id={titleId}
+              css={styles.euiQuickSelectPanel__title}
+            >
+              {title}
+            </TitleComponent>
+          </EuiTitle>
+          <div css={styles.euiQuickSelectPanel__section}>{children}</div>
+        </>
+      ) : (
+        children
+      )}
+    </Component>
+  );
+};