diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png
index 9258323658e..10e1b2d2685 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Custom_Matcher.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png
index c5034c96f9e..38a2db062f5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png
index c5034c96f9e..38a2db062f5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png
index c9b5b0509d1..3911b671f9b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_With_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_With_Tooltip.png
deleted file mode 100644
index d61251e4aaa..00000000000
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_With_Tooltip.png and /dev/null differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png
index 3fa4ea31f1e..62b2e102851 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Custom_Matcher.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png
index 3479db0db8d..bd00849b0b8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png
index 3479db0db8d..bd00849b0b8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png
index 4a8a1f8c169..1e06ba09888 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_With_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_With_Tooltip.png
deleted file mode 100644
index 0a62188a363..00000000000
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_With_Tooltip.png and /dev/null differ
diff --git a/packages/eui/changelogs/upcoming/7950.md b/packages/eui/changelogs/upcoming/7950.md
new file mode 100644
index 00000000000..e3b4fde37c8
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7950.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiComboBox` to Emotion
diff --git a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index b2c9a5808e3..0f720943656 100644
--- a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -2,21 +2,21 @@
 
 exports[`EuiComboBox renders 1`] = `
 <div
-  class="euiComboBox testClass1 testClass2 emotion-euiTestCss"
+  class="euiComboBox testClass1 testClass2 emotion-euiComboBox-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
     class="euiPopover euiInputPopover emotion-euiPopover-block-EuiInputPopover"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
         style="--euiFormControlRightIconsCount: 1;"
       >
         <div
-          class="euiComboBox__inputWrap euiFormControlLayout--1icons"
+          class="euiComboBox__inputWrap emotion-euiComboBoxInputWrapper-multiSelect"
           data-test-subj="comboBoxInput"
           tabindex="-1"
         >
@@ -27,7 +27,7 @@ exports[`EuiComboBox renders 1`] = `
             aria-invalid="false"
             aria-label="aria-label"
             autocomplete="off"
-            class="euiComboBox__input"
+            class="euiComboBox__input emotion-euiComboBoxInput"
             data-test-subj="comboBoxSearchInput"
             id="generated-id__eui-combobox-id"
             role="combobox"
@@ -62,21 +62,21 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
 <body>
   <div>
     <div
-      class="euiComboBox euiComboBox-isOpen"
+      class="euiComboBox euiComboBox-isOpen emotion-euiComboBox"
       data-test-subj="alsoGetsAppliedToOptionsList"
     >
       <div
         class="euiPopover euiPopover-isOpen euiInputPopover emotion-euiPopover-block-EuiInputPopover"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout emotion-euiComboBox__formControlLayout-multiSelect"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
             style="--euiFormControlRightIconsCount: 1;"
           >
             <div
-              class="euiComboBox__inputWrap euiFormControlLayout--1icons"
+              class="euiComboBox__inputWrap emotion-euiComboBoxInputWrapper-multiSelect-open"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
@@ -86,7 +86,7 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
                 aria-expanded="true"
                 aria-invalid="false"
                 autocomplete="off"
-                class="euiComboBox__input"
+                class="euiComboBox__input emotion-euiComboBoxInput"
                 data-test-subj="comboBoxSearchInput"
                 id="generated-id__eui-combobox-id"
                 role="combobox"
@@ -153,11 +153,11 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
             data-focus-lock-disabled="disabled"
           >
             <div
-              class="euiComboBoxOptionsList"
+              class="euiComboBoxOptionsList emotion-euiComboBoxOptionList"
               data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
             >
               <div
-                class="euiComboBoxOptionsList__virtualization"
+                class="euiComboBoxOptionsList__virtualization emotion-euiComboBoxOptionList__virtualization"
                 style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
               >
                 <div
diff --git a/packages/eui/src/components/combo_box/_combo_box.scss b/packages/eui/src/components/combo_box/_combo_box.scss
deleted file mode 100644
index f87585d60fa..00000000000
--- a/packages/eui/src/components/combo_box/_combo_box.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-.euiComboBox {
-  @include euiFormControlSize(auto, $includeAlternates: true);
-  position: relative;
-
-  /**
-   * 1. Allow pills to truncate their text with an ellipsis.
-   * 2. Don't allow pills/placeholder to overlap with the caret, loading icon or clear button.
-   * 3. The height on combo can be larger than normal text inputs except for single-selection comboboxes.
-   */
-
-  &--compressed:not(.euiComboBox--appended, .euiComboBox--prepended) {
-    height: auto; /* 3 */
-  }
-
-  &:not(.euiComboBox--appended, .euiComboBox--prepended) {
-    .euiFormControlLayout {
-      height: auto; /* 3 */
-    }
-  }
-
-  .euiComboBox__inputWrap {
-    @include euiFormControlStyle($includeStates: false, $includeSizes: true);
-    @include euiFormControlSize(auto, $includeAlternates: true);
-
-    padding: $euiSizeXS $euiSizeS;
-    padding-right: var(--eui-form-control-layout-icons-padding, $euiSizeS); /* 2 */
-    display: flex; /* 1 */
-    outline: none; // Fixes an intermittent focus ring in Firefox
-
-    .euiComboBoxPill {
-      $inputMinWidth: $euiSize;
-
-      // Ensure the input doesn't drop to the next line when the EuiBadge has a very long text
-      // Overrides the default EuiBadge max-width that is 100%
-      max-width: calc(100% - #{$euiSizeXS * .5} - #{$inputMinWidth});
-    }
-
-    &:not(.euiComboBox__inputWrap--noWrap) {
-      padding-top: $euiSizeXS;
-      padding-bottom: $euiSizeXS;
-      padding-left: $euiSizeXS;
-      height: auto;  /* 3 */
-      flex-wrap: wrap; /* 1 */
-      align-content: flex-start;
-      cursor: text;
-    }
-
-    &.euiComboBox__inputWrap--noWrap {
-      align-items: center;
-    }
-
-    // Match placeholder and plain text position to EuiFieldText
-    &.euiComboBox__inputWrap--plainText {
-      padding-inline-start: $euiSizeS;
-    }
-
-    .euiComboBoxPlainTextSelection {
-      &__prepend,
-      &__append {
-        flex-shrink: 0;
-        margin-inline: $euiSizeXS / 2;
-        display: flex; /* Vertically centers any icons */
-      }
-
-      &__prepend {
-        margin-inline-start: $euiSizeXS;
-      }
-
-      &__append {
-        margin-inline-end: $euiSizeXS;
-      }
-    }
-  }
-
-  /**
-   * 1. Force field height to match other field heights.
-   * 2. Force input height to expand to fill this element.
-   * 3. Reset input appearance to mimic text
-   * 4. Ensure that no input states are visible on the hidden input
-   */
-  .euiComboBox__input {
-    block-size: $euiSizeL; /* 2 */
-    min-inline-size: 2px;
-    max-inline-size: 100%;
-    margin: $euiSizeXS;
-
-    /* 3 */
-    background: transparent;
-    @include euiFormControlText;
-
-    &:disabled {
-      @include euiFormControlDisabledStyle;
-    }
-
-    /* 4 */
-    // stylelint-disable declaration-no-important
-    appearance: none !important;
-    border: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-    // stylelint-enable declaration-no-important
-  }
-
-  &.euiComboBox-isOpen {
-    .euiComboBox__inputWrap {
-      @include euiFormControlFocusStyle;
-
-      &--compressed {
-        @include euiFormControlFocusStyle($borderOnly: true);
-      }
-    }
-  }
-
-  &.euiComboBox-isInvalid {
-    .euiComboBox__inputWrap {
-      @include euiFormControlInvalidStyle;
-    }
-  }
-
-  &.euiComboBox-isDisabled {
-    .euiComboBox__inputWrap {
-      // stylelint-disable property-no-vendor-prefix
-      @include euiFormControlDisabledStyle;
-      -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors
-    }
-
-    // overrides the `cursor: text;` that displays on hover for combo boxes that allow multiple pills
-    .euiComboBox__inputWrap,
-    .euiComboBoxPill {
-      cursor: not-allowed;
-    }
-  }
-
-  &.euiComboBox--compressed {
-    .euiComboBox__inputWrap {
-      line-height: $euiFormControlCompressedHeight; /* 2 */
-      padding-block: 0;
-
-      &--plainText {
-        padding-inline-start: $euiSizeXS;
-      }
-    }
-  }
-}
diff --git a/packages/eui/src/components/combo_box/_index.scss b/packages/eui/src/components/combo_box/_index.scss
deleted file mode 100644
index 29040a0addd..00000000000
--- a/packages/eui/src/components/combo_box/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'combo_box';
-@import 'combo_box_input/index';
-@import 'combo_box_options_list/index';
diff --git a/packages/eui/src/components/combo_box/combo_box.spec.tsx b/packages/eui/src/components/combo_box/combo_box.spec.tsx
index 102916419cc..58c0e06ed4a 100644
--- a/packages/eui/src/components/combo_box/combo_box.spec.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.spec.tsx
@@ -96,7 +96,7 @@ describe('EuiComboBox', () => {
       );
       cy.get('[data-test-subj="comboBoxSearchInput"]')
         .invoke('width')
-        .should('be.eq', 354);
+        .should('be.eq', 356);
     });
   });
 
diff --git a/packages/eui/src/components/combo_box/combo_box.stories.tsx b/packages/eui/src/components/combo_box/combo_box.stories.tsx
index 061e120c6f4..c65dcb5aaba 100644
--- a/packages/eui/src/components/combo_box/combo_box.stories.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.stories.tsx
@@ -21,15 +21,6 @@ import { EuiFlexItem } from '../flex';
 import { EuiComboBoxOptionMatcher } from './types';
 import { EuiComboBox, EuiComboBoxProps } from './combo_box';
 
-const toolTipProps = {
-  toolTipContent: 'This is a tooltip!',
-  toolTipProps: {
-    position: 'left' as const,
-    ['data-test-subj']: 'tooltip',
-  },
-  value: 4,
-};
-
 const options = [
   { label: 'Item 1' },
   { label: 'Item 2' },
@@ -89,16 +80,17 @@ export const WithTooltip: Story = {
     controls: {
       include: ['fullWidth', 'options', 'selectedOptions', 'onChange'],
     },
-    loki: {
-      // popover and tooltip are rendered in a portal
-      // LOKI_SELECTOR.portal currently doesn't work so we use body instead
-      chromeSelector: LOKI_SELECTORS.body,
-    },
+    // This story is flaky in VRT and always takes a new screenshot - skipping it
+    loki: { skip: true },
   },
   args: {
     options: options.map((option, idx) => ({
       ...option,
-      ...toolTipProps,
+      toolTipContent: 'This is a tooltip!',
+      toolTipProps: {
+        position: 'left' as const,
+        ['data-test-subj']: 'tooltip',
+      },
       value: idx,
     })),
   },
diff --git a/packages/eui/src/components/combo_box/combo_box.styles.ts b/packages/eui/src/components/combo_box/combo_box.styles.ts
new file mode 100644
index 00000000000..d71dcb333ef
--- /dev/null
+++ b/packages/eui/src/components/combo_box/combo_box.styles.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { logicalCSS } from '../../global_styling';
+
+export const euiComboBoxStyles = {
+  euiComboBox: css`
+    position: relative;
+    ${logicalCSS('width', '100%')}
+    ${logicalCSS('height', 'auto')}
+  `,
+  fullWidth: css`
+    ${logicalCSS('max-width', '100%')}
+  `,
+};
diff --git a/packages/eui/src/components/combo_box/combo_box.test.tsx b/packages/eui/src/components/combo_box/combo_box.test.tsx
index 251222921e6..565b0bebb35 100644
--- a/packages/eui/src/components/combo_box/combo_box.test.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.test.tsx
@@ -357,13 +357,10 @@ describe('EuiComboBox', () => {
           />
         );
 
+        expect(container.firstElementChild!.className).toContain('-fullWidth');
         expect(container.innerHTML).toContain(
           'euiFormControlLayout--fullWidth'
         );
-        expect(container.innerHTML).toContain('euiComboBox--fullWidth');
-        expect(container.innerHTML).toContain(
-          'euiComboBox__inputWrap--fullWidth'
-        );
       });
 
       test('autoFocus', () => {
diff --git a/packages/eui/src/components/combo_box/combo_box.tsx b/packages/eui/src/components/combo_box/combo_box.tsx
index ee8a578e2d7..f7d692067b3 100644
--- a/packages/eui/src/components/combo_box/combo_box.tsx
+++ b/packages/eui/src/components/combo_box/combo_box.tsx
@@ -19,11 +19,13 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { htmlIdGenerator, keys } from '../../services';
+import { RenderWithEuiTheme, htmlIdGenerator, keys } from '../../services';
+import { logicalStyle } from '../../global_styling';
 import { CommonProps } from '../common';
 import { EuiInputPopover, EuiInputPopoverProps } from '../popover';
 import { EuiI18n } from '../i18n';
 import { EuiFormControlLayoutProps } from '../form';
+import { euiFormMaxWidth } from '../form/form.styles';
 import type { EuiTextTruncateProps } from '../text_truncate';
 
 import {
@@ -47,6 +49,7 @@ import {
   EuiComboBoxOptionMatcher,
 } from './types';
 import { EuiComboBoxOptionsList } from './combo_box_options_list';
+import { euiComboBoxStyles as styles } from './combo_box.styles';
 
 type DrillProps<T> = Pick<
   EuiComboBoxOptionsListProps<T>,
@@ -768,10 +771,6 @@ export class EuiComboBox<T> extends Component<
     );
 
     const classes = classNames('euiComboBox', className, {
-      'euiComboBox--compressed': compressed,
-      'euiComboBox--fullWidth': fullWidth,
-      'euiComboBox--prepended': prepend,
-      'euiComboBox--appended': append,
       'euiComboBox-isDisabled': isDisabled,
       'euiComboBox-isInvalid': markAsInvalid,
       'euiComboBox-isOpen': isListOpen,
@@ -781,7 +780,7 @@ export class EuiComboBox<T> extends Component<
       .map((selectedOption) => selectedOption.label)
       .join(', ');
 
-    let optionsList;
+    let optionsList: React.ReactElement;
 
     if (!noSuggestions && isListOpen) {
       const optionsListDataTestSubj = dataTestSubj
@@ -835,67 +834,80 @@ export class EuiComboBox<T> extends Component<
        *
        * https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html
        */
-      <div
-        {...rest}
-        className={classes}
-        data-test-subj={dataTestSubj}
-        onKeyDown={this.onKeyDown}
-        onBlur={this.onContainerBlur}
-        ref={this.comboBoxRefCallback}
-      >
-        <EuiInputPopover
-          fullWidth={fullWidth}
-          panelPaddingSize="none"
-          disableFocusTrap={true}
-          closeOnScroll={true}
-          {...inputPopoverProps}
-          isOpen={isListOpen}
-          closePopover={this.closeList}
-          input={
-            <EuiComboBoxInput
-              compressed={compressed}
-              focusedOptionId={
-                this.hasActiveOption()
-                  ? this.rootId(`_option-${this.state.activeOptionIndex}`)
-                  : undefined
-              }
-              fullWidth={fullWidth}
-              hasSelectedOptions={selectedOptions.length > 0}
-              id={inputId}
-              inputRef={this.searchInputRefCallback}
-              isDisabled={isDisabled}
-              isListOpen={isListOpen}
-              noIcon={!!noSuggestions}
-              onChange={this.onSearchChange}
-              onClear={
-                isClearable && !isDisabled
-                  ? this.clearSelectedOptions
-                  : undefined
-              }
-              onClick={this.onComboBoxClick}
-              onCloseListClick={this.closeList}
-              onFocus={this.onComboBoxFocus}
-              onOpenListClick={this.onOpenListClick}
-              onRemoveOption={this.onRemoveOption}
-              placeholder={placeholder}
-              rootId={this.rootId}
-              searchValue={searchValue}
-              selectedOptions={selectedOptions}
-              singleSelection={singleSelection}
-              value={value}
-              append={singleSelection ? append : undefined}
-              prepend={singleSelection ? prepend : undefined}
-              isLoading={isLoading}
-              isInvalid={markAsInvalid}
-              autoFocus={autoFocus}
-              aria-label={ariaLabel}
-              aria-labelledby={ariaLabelledby}
-            />
-          }
-        >
-          {optionsList}
-        </EuiInputPopover>
-      </div>
+      <RenderWithEuiTheme>
+        {(euiTheme) => {
+          const cssStyles = [
+            styles.euiComboBox,
+            fullWidth
+              ? styles.fullWidth
+              : logicalStyle('max-width', euiFormMaxWidth(euiTheme)),
+          ];
+          return (
+            <div
+              css={cssStyles}
+              {...rest}
+              className={classes}
+              data-test-subj={dataTestSubj}
+              onKeyDown={this.onKeyDown}
+              onBlur={this.onContainerBlur}
+              ref={this.comboBoxRefCallback}
+            >
+              <EuiInputPopover
+                fullWidth={fullWidth}
+                panelPaddingSize="none"
+                disableFocusTrap={true}
+                closeOnScroll={true}
+                {...inputPopoverProps}
+                isOpen={isListOpen}
+                closePopover={this.closeList}
+                input={
+                  <EuiComboBoxInput
+                    compressed={compressed}
+                    focusedOptionId={
+                      this.hasActiveOption()
+                        ? this.rootId(`_option-${this.state.activeOptionIndex}`)
+                        : undefined
+                    }
+                    fullWidth={fullWidth}
+                    hasSelectedOptions={selectedOptions.length > 0}
+                    id={inputId}
+                    inputRef={this.searchInputRefCallback}
+                    isDisabled={isDisabled}
+                    isListOpen={isListOpen}
+                    noIcon={!!noSuggestions}
+                    onChange={this.onSearchChange}
+                    onClear={
+                      isClearable && !isDisabled
+                        ? this.clearSelectedOptions
+                        : undefined
+                    }
+                    onClick={this.onComboBoxClick}
+                    onCloseListClick={this.closeList}
+                    onFocus={this.onComboBoxFocus}
+                    onOpenListClick={this.onOpenListClick}
+                    onRemoveOption={this.onRemoveOption}
+                    placeholder={placeholder}
+                    rootId={this.rootId}
+                    searchValue={searchValue}
+                    selectedOptions={selectedOptions}
+                    singleSelection={singleSelection}
+                    value={value}
+                    append={singleSelection ? append : undefined}
+                    prepend={singleSelection ? prepend : undefined}
+                    isLoading={isLoading}
+                    isInvalid={markAsInvalid}
+                    autoFocus={autoFocus}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledby}
+                  />
+                }
+              >
+                {optionsList}
+              </EuiInputPopover>
+            </div>
+          );
+        }}
+      </RenderWithEuiTheme>
     );
   }
 }
diff --git a/packages/eui/src/components/combo_box/combo_box_input/_combo_box_pill.scss b/packages/eui/src/components/combo_box/combo_box_input/_combo_box_pill.scss
deleted file mode 100644
index 9eccbd409db..00000000000
--- a/packages/eui/src/components/combo_box/combo_box_input/_combo_box_pill.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * 1. Overwrites the base styling of EuiBadge, to give it a larger size and margins
- * that make sense in the input wrap.
- */
-.euiComboBoxPill {
-  $pillHeight: $euiSizeL - 2px;
-  height: $pillHeight;
-  line-height: $pillHeight - ($euiBorderWidthThin * 2);
-  vertical-align: baseline;
-
-  &,
-  & + & /* 1 */ {
-    margin: $euiSizeXS;
-  }
-
-  .euiComboBox--compressed &,
-  .euiComboBox--compressed & + & /* 1 */ {
-    margin: ($euiSizeXS + 1px) $euiSizeXS 0 0;
-  }
-
-  &__prepend {
-    margin-right: $euiSizeXS;
-  }
-
-  &__append {
-    margin-left: $euiSizeXS;
-  }
-
-  /* Fix append/prepend vertical alignment */
-  .euiBadge__text {
-    display: flex;
-    align-items: center;
-
-    .euiIcon {
-      display: block;
-    }
-  }
-}
diff --git a/packages/eui/src/components/combo_box/combo_box_input/_index.scss b/packages/eui/src/components/combo_box/combo_box_input/_index.scss
deleted file mode 100644
index 742addb8c4e..00000000000
--- a/packages/eui/src/components/combo_box/combo_box_input/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'combo_box_pill';
diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts
new file mode 100644
index 00000000000..7bc933ce7f2
--- /dev/null
+++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.styles.ts
@@ -0,0 +1,115 @@
+/*
+ * 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';
+import {
+  euiFormControlStyles,
+  euiFormControlDefaultShadow,
+  euiFormControlText,
+} from '../../form/form.styles';
+
+export const euiComboBoxInputStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const formStyles = euiFormControlStyles(euiThemeContext);
+
+  return {
+    // Wrapper which visually mimics a form control
+    euiComboBoxInputWrapper: css`
+      ${euiFormControlDefaultShadow(euiThemeContext)}
+      display: flex;
+    `,
+    multiSelect: css`
+      flex-wrap: wrap;
+    `,
+    uncompressed: `
+      ${formStyles.uncompressed}
+      ${logicalCSS('height', 'auto')}
+      ${logicalCSS('padding-vertical', euiTheme.size.s)}
+      ${logicalCSS('padding-left', euiTheme.size.s)}
+      column-gap: ${euiTheme.size.s};
+      row-gap: ${euiTheme.size.xs};
+    `,
+    compressed: css`
+      ${formStyles.compressed}
+      ${logicalCSS('height', 'auto')}
+      ${logicalCSS('padding-vertical', euiTheme.size.xs)}
+      ${logicalCSS('padding-left', euiTheme.size.xs)}
+      column-gap: ${euiTheme.size.xs};
+      row-gap: ${euiTheme.size.xxs};
+    `,
+    plainText: {
+      plainText: css`
+        align-items: center;
+        cursor: text;
+      `,
+      compressed: `
+        ${logicalCSS('padding-left', euiTheme.size.s)}
+      `,
+      uncompressed: `
+        ${logicalCSS('padding-left', euiTheme.size.m)}
+      `,
+    },
+
+    invalid: css(formStyles.invalid),
+    disabled: css(formStyles.disabled),
+    open: css(formStyles.focus),
+    inGroup: css(formStyles.inGroup),
+
+    // Actual input element, which has variable width depending on its value
+    euiComboBoxInput: css`
+      /* Force input height to expand to fill this element. */
+      ${logicalCSS('height', euiTheme.size.l)}
+      ${logicalCSS('min-width', '2px')}
+      ${logicalCSS('max-width', '100%')}
+
+      /* Reset input appearance to mimic text */
+      ${euiFormControlText(euiThemeContext)}
+      background: transparent;
+
+      &:disabled {
+        color: ${euiTheme.colors.disabledText};
+      }
+
+      /* Ensure that no input states are visible on the hidden input */
+      /* stylelint-disable declaration-no-important */
+      appearance: none !important;
+      border: none !important;
+      box-shadow: none !important;
+      outline: none !important;
+      /* stylelint-enable declaration-no-important */
+    `,
+
+    // EuiFormControlLayout overrides
+    formLayout: {
+      euiComboBox__formControlLayout: css``,
+      // Allow the form control to expand to any height to accommodate multiple rows of pills
+      // TODO: Remove && specificity override once EuiFormControlLayout is on Emotion
+      multiSelect: css`
+        && {
+          ${logicalCSS('height', 'auto')}
+        }
+      `,
+      // Fix overflowing input wrapper background
+      prependOnly: css`
+        .euiFormControlLayout__childrenWrapper {
+          ${logicalCSS('border-top-right-radius', 'inherit')}
+          ${logicalCSS('border-bottom-right-radius', 'inherit')}
+        }
+      `,
+      appendOnly: css`
+        .euiFormControlLayout__childrenWrapper {
+          ${logicalCSS('border-top-left-radius', 'inherit')}
+          ${logicalCSS('border-bottom-left-radius', 'inherit')}
+        }
+      `,
+    },
+  };
+};
diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
index c610773be86..a85eb26d68b 100644
--- a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -11,18 +11,23 @@ import React, {
   FocusEventHandler,
   KeyboardEventHandler,
   RefCallback,
+  ReactNode,
 } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../../common';
-import { htmlIdGenerator, keys, CanvasTextUtils } from '../../../services';
+import {
+  htmlIdGenerator,
+  keys,
+  CanvasTextUtils,
+  RenderWithEuiStylesMemoizer,
+} from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
 } from '../../form/form_control_layout';
 import { EuiFormControlLayoutIconsProps } from '../../form/form_control_layout/form_control_layout_icons';
-import { getFormControlClassNameForIconCount } from '../../form/form_control_layout/_num_icons';
 
 import {
   EuiComboBoxOptionOption,
@@ -31,6 +36,7 @@ import {
 } from '../types';
 import { EuiComboBoxOptionAppendPrepend } from '../utils';
 import { EuiComboBoxPill } from './combo_box_pill';
+import { euiComboBoxInputStyles } from './combo_box_input.styles';
 
 export interface EuiComboBoxInputProps<T> extends CommonProps {
   compressed: boolean;
@@ -245,7 +251,7 @@ export class EuiComboBoxInput<T> extends Component<
       'aria-labelledby': ariaLabelledby,
     } = this.props;
 
-    let removeOptionMessage;
+    let removeOptionMessage: ReactNode;
     let removeOptionMessageId;
 
     if (this.state.hasFocus) {
@@ -277,6 +283,7 @@ export class EuiComboBoxInput<T> extends Component<
       );
     }
 
+    const isInGroup = singleSelection && (prepend || append);
     const showPlaceholder =
       placeholder && !selectedOptions?.length && !searchValue;
 
@@ -303,79 +310,107 @@ export class EuiComboBoxInput<T> extends Component<
       };
     }
 
-    const numIconsClass = getFormControlClassNameForIconCount({
-      isDropdown: !noIcon,
-      clear: !!clickProps.clear,
-      isInvalid,
-      isLoading,
-    });
-
-    const wrapClasses = classNames('euiComboBox__inputWrap', numIconsClass, {
-      'euiComboBox__inputWrap--compressed': compressed,
-      'euiComboBox__inputWrap--fullWidth': fullWidth,
-      'euiComboBox__inputWrap--noWrap': singleSelection,
-      'euiComboBox__inputWrap--plainText': this.asPlainText || showPlaceholder,
-      'euiComboBox__inputWrap--inGroup': prepend || append,
+    const wrapClasses = classNames('euiComboBox__inputWrap', {
+      'euiComboBox__inputWrap--plainText': this.asPlainText,
     });
 
     return (
-      <EuiFormControlLayout
-        icon={icon}
-        {...clickProps}
-        inputId={id}
-        isLoading={isLoading}
-        isInvalid={isInvalid}
-        compressed={compressed}
-        fullWidth={fullWidth}
-        prepend={prepend}
-        append={append}
-      >
-        <div
-          className={wrapClasses}
-          data-test-subj="comboBoxInput"
-          onClick={onClick}
-          tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-        >
-          {this.renderPills()}
-          <EuiComboBoxOptionAppendPrepend
-            option={this.asPlainText ? selectedOptions?.[0] : undefined}
-            classNamePrefix="euiComboBoxPlainTextSelection"
-          >
-            <input
-              aria-activedescendant={focusedOptionId}
-              aria-autocomplete="list"
-              aria-controls={isListOpen ? rootId('listbox') : ''}
-              aria-expanded={isListOpen}
-              aria-label={ariaLabel}
-              aria-labelledby={ariaLabelledby}
-              aria-invalid={isInvalid}
-              className="euiComboBox__input"
-              data-test-subj="comboBoxSearchInput"
-              disabled={isDisabled}
-              id={id}
-              onBlur={this.onBlur}
-              onChange={(event) => onChange(event.target.value)}
-              onFocus={this.onFocus}
-              onKeyDown={this.onKeyDown}
-              ref={this.inputRefCallback}
-              role="combobox"
-              style={{
-                inlineSize:
-                  this.asPlainText || showPlaceholder
-                    ? '100%'
-                    : this.state.inputWidth,
-              }}
-              placeholder={showPlaceholder ? placeholder : undefined}
-              value={this.searchValue}
-              autoFocus={autoFocus}
-              autoComplete="off"
-              // Force the menu to re-open on every input click - only necessary when plain text
-              onClick={this.asPlainText ? (onFocus as any) : undefined} // Type shenanigans - event should be mostly the same
-            />
-          </EuiComboBoxOptionAppendPrepend>
-          {removeOptionMessage}
-        </div>
-      </EuiFormControlLayout>
+      <RenderWithEuiStylesMemoizer>
+        {(stylesMemoizer) => {
+          const styles = stylesMemoizer(euiComboBoxInputStyles);
+          const cssStyles = [
+            styles.euiComboBoxInputWrapper,
+            !singleSelection && styles.multiSelect,
+            compressed ? styles.compressed : styles.uncompressed,
+            ...(this.asPlainText || showPlaceholder
+              ? [
+                  styles.plainText.plainText,
+                  compressed
+                    ? styles.plainText.compressed
+                    : styles.plainText.uncompressed,
+                ]
+              : []),
+            isDisabled
+              ? styles.disabled
+              : isInvalid
+              ? styles.invalid
+              : isListOpen
+              ? styles.open
+              : undefined,
+            isInGroup && styles.inGroup,
+          ];
+          const formLayoutStyles = [
+            styles.formLayout.euiComboBox__formControlLayout,
+            !singleSelection && styles.formLayout.multiSelect,
+            isInGroup && !append && styles.formLayout.prependOnly,
+            isInGroup && !prepend && styles.formLayout.appendOnly,
+          ];
+
+          return (
+            <EuiFormControlLayout
+              icon={icon}
+              {...clickProps}
+              inputId={id}
+              isLoading={isLoading}
+              isInvalid={isInvalid}
+              compressed={compressed}
+              fullWidth={fullWidth}
+              prepend={prepend}
+              append={append}
+              css={formLayoutStyles}
+            >
+              <div
+                css={cssStyles}
+                className={wrapClasses}
+                data-test-subj="comboBoxInput"
+                onClick={onClick}
+                tabIndex={-1} // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
+              >
+                {this.renderPills()}
+                <EuiComboBoxOptionAppendPrepend
+                  option={this.asPlainText ? selectedOptions?.[0] : undefined}
+                  classNamePrefix="euiComboBoxPlainTextSelection"
+                  marginSize="xxs"
+                >
+                  <input
+                    aria-activedescendant={focusedOptionId}
+                    aria-autocomplete="list"
+                    aria-controls={isListOpen ? rootId('listbox') : ''}
+                    aria-expanded={isListOpen}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledby}
+                    aria-invalid={isInvalid}
+                    css={styles.euiComboBoxInput}
+                    className="euiComboBox__input"
+                    data-test-subj="comboBoxSearchInput"
+                    disabled={isDisabled}
+                    id={id}
+                    onBlur={this.onBlur}
+                    onChange={(event) => onChange(event.target.value)}
+                    onFocus={this.onFocus}
+                    onKeyDown={this.onKeyDown}
+                    ref={this.inputRefCallback}
+                    role="combobox"
+                    style={{
+                      inlineSize:
+                        this.asPlainText || showPlaceholder
+                          ? '100%'
+                          : this.state.inputWidth,
+                    }}
+                    placeholder={showPlaceholder ? placeholder : undefined}
+                    value={this.searchValue}
+                    autoFocus={autoFocus}
+                    autoComplete="off"
+                    // Force the menu to re-open on every input click - only necessary when plain text
+                    onClick={this.asPlainText ? (onFocus as any) : undefined} // Type shenanigans - event should be mostly the same
+                  />
+                </EuiComboBoxOptionAppendPrepend>
+                {removeOptionMessage}
+              </div>
+            </EuiFormControlLayout>
+          );
+        }}
+      </RenderWithEuiStylesMemoizer>
     );
   }
 }
diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_pill.styles.ts b/packages/eui/src/components/combo_box/combo_box_input/combo_box_pill.styles.ts
new file mode 100644
index 00000000000..a863a207187
--- /dev/null
+++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_pill.styles.ts
@@ -0,0 +1,49 @@
+/*
+ * 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, mathWithUnits } from '../../../global_styling';
+
+export const euiComboBoxPillStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  // Ensure the input doesn't drop to the next line when the EuiBadge has a very long text
+  const pillMaxWidth = `calc(100% - ${euiTheme.size.xxs} - ${euiTheme.size.base})`;
+  const pillHeight = mathWithUnits(euiTheme.size.l, (x) => x - 2);
+  const pillLineHeight = mathWithUnits(pillHeight, (x) => x - 2);
+
+  return {
+    euiComboBoxPill: css`
+      ${logicalCSS('max-width', pillMaxWidth)}
+      ${logicalCSS('height', pillHeight)}
+      line-height: ${pillLineHeight};
+      vertical-align: baseline;
+
+      /* Pills are 2px shorter than the input (see pillHeight), so
+       * add a vertical margin offset to center them with the input */
+      ${logicalCSS('margin-vertical', '1px')}
+
+      /* Pill margins are already handled by flex gap - unset EuiBadge's */
+      & + .euiBadge {
+        ${logicalCSS('margin-left', 0)}
+      }
+
+      /* Fix append/prepend vertical alignment */
+      .euiBadge__text {
+        display: flex;
+        align-items: center;
+
+        .euiIcon {
+          display: block;
+        }
+      }
+    `,
+  };
+};
diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_pill.tsx b/packages/eui/src/components/combo_box/combo_box_input/combo_box_pill.tsx
index 7b164d898c4..c0d14ee98b7 100644
--- a/packages/eui/src/components/combo_box/combo_box_input/combo_box_pill.tsx
+++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_pill.tsx
@@ -6,15 +6,17 @@
  * Side Public License, v 1.
  */
 
-import React, { AriaAttributes, Component, MouseEventHandler } from 'react';
+import React, { AriaAttributes, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiBadge } from '../../badge';
 import { EuiI18n } from '../../i18n';
 import { EuiComboBoxOptionOption, OptionHandler } from '../types';
 import { CommonProps } from '../../common';
 
 import { EuiComboBoxOptionAppendPrepend } from '../utils';
+import { euiComboBoxPillStyles } from './combo_box_pill.styles';
 
 export interface EuiComboBoxPillProps<T> extends CommonProps {
   children?: string;
@@ -26,90 +28,79 @@ export interface EuiComboBoxPillProps<T> extends CommonProps {
   option: EuiComboBoxOptionOption<T>;
 }
 
-export class EuiComboBoxPill<T> extends Component<EuiComboBoxPillProps<T>> {
-  static defaultProps = {
-    color: 'hollow',
-  };
+export const EuiComboBoxPill = <T,>({
+  children,
+  className,
+  color = 'hollow',
+  onClick,
+  onClickAriaLabel,
+  onClose,
+  option,
+  ...rest
+}: EuiComboBoxPillProps<T>) => {
+  const classes = classNames('euiComboBoxPill', className);
 
-  onCloseButtonClick = () => {
-    const { onClose, option } = this.props;
-    if (onClose) {
-      onClose(option);
-    }
-  };
+  const styles = useEuiMemoizedStyles(euiComboBoxPillStyles);
+  const cssStyles = styles.euiComboBoxPill;
 
-  render() {
-    const {
-      children,
-      className,
-      color,
-      onClick,
-      onClickAriaLabel,
-      onClose,
-      option,
-      ...rest
-    } = this.props;
+  const onClickProps =
+    onClick && onClickAriaLabel
+      ? {
+          onClick,
+          onClickAriaLabel,
+        }
+      : {};
 
-    const classes = classNames('euiComboBoxPill', className);
-
-    const onClickProps =
-      onClick && onClickAriaLabel
-        ? {
-            onClick,
-            onClickAriaLabel,
-          }
-        : {};
-
-    const content = (
-      <EuiComboBoxOptionAppendPrepend
-        option={option}
-        classNamePrefix="euiComboBoxPill"
-      >
-        {/* .euiBadge__text normally text truncates, but because we set it to flex to align prepend/append
-          it breaks and we need to restore it manually
-         */}
-        <span className="eui-textTruncate">{children}</span>
-      </EuiComboBoxOptionAppendPrepend>
-    );
-
-    if (onClose) {
-      return (
-        <EuiI18n
-          token="euiComboBoxPill.removeSelection"
-          default="Remove {children} from selection in this group"
-          values={{ children }}
-        >
-          {(removeSelection: string) => (
-            <EuiBadge
-              className={classes}
-              color={color}
-              data-test-subj="euiComboBoxPill"
-              iconOnClick={this.onCloseButtonClick}
-              iconOnClickAriaLabel={removeSelection}
-              iconSide="right"
-              iconType="cross"
-              title={children}
-              {...onClickProps}
-              {...rest}
-            >
-              {content}
-            </EuiBadge>
-          )}
-        </EuiI18n>
-      );
-    }
+  const content = (
+    <EuiComboBoxOptionAppendPrepend
+      option={option}
+      classNamePrefix="euiComboBoxPill"
+    >
+      {/* .euiBadge__text normally text truncates, but because we set it to flex
+          to align prepend/append, it breaks and we need to restore it manually */}
+      <span className="eui-textTruncate">{children}</span>
+    </EuiComboBoxOptionAppendPrepend>
+  );
 
+  if (onClose) {
     return (
-      <EuiBadge
-        className={classes}
-        color={color}
-        data-test-subj="euiComboBoxPill"
-        title={children}
-        {...rest}
-        {...onClickProps}
+      <EuiI18n
+        token="euiComboBoxPill.removeSelection"
+        default="Remove {children} from selection in this group"
+        values={{ children }}
       >
-        {content}
-      </EuiBadge>
+        {(removeSelection: string) => (
+          <EuiBadge
+            css={cssStyles}
+            className={classes}
+            color={color}
+            data-test-subj="euiComboBoxPill"
+            iconOnClick={() => onClose(option)}
+            iconOnClickAriaLabel={removeSelection}
+            iconSide="right"
+            iconType="cross"
+            title={children}
+            {...onClickProps}
+            {...rest}
+          >
+            {content}
+          </EuiBadge>
+        )}
+      </EuiI18n>
     );
   }
-}
+
+  return (
+    <EuiBadge
+      css={cssStyles}
+      className={classes}
+      color={color}
+      data-test-subj="euiComboBoxPill"
+      title={children}
+      {...rest}
+      {...onClickProps}
+    >
+      {content}
+    </EuiBadge>
+  );
+};
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
deleted file mode 100644
index cc0e118af85..00000000000
--- a/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-.euiComboBoxOption {
-  font-size: $euiFontSizeS;
-  padding: $euiSizeXS $euiSizeS $euiSizeXS #{$euiSizeM + $euiSizeXS};
-  width: 100%;
-  text-align: left;
-  border: $euiBorderThin;
-  border-color: transparent;
-  display: flex;
-  align-items: center;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &.euiComboBoxOption-isFocused {
-    cursor: pointer;
-    color: $euiColorPrimaryText;
-    background-color: $euiFocusBackgroundColor;
-  }
-
-  &.euiComboBoxOption-isDisabled {
-    color: $euiColorMediumShade;
-    cursor: not-allowed;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  &__contentWrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  &__content {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    flex: 1;
-    text-align: left;
-  }
-
-  &__emptyStateText {
-    flex: 1;
-    text-align: left;
-
-    /* Extra specificity required to override EuiText's <p> styling */
-    .euiComboBoxOptionsList__empty & {
-      margin-bottom: 0;
-    }
-  }
-
-  &__enterBadge {
-    margin-left: $euiSizeXS;
-  }
-
-  &__prepend {
-    margin-right: $euiSizeS;
-  }
-
-  &__append {
-    margin-left: $euiSizeS;
-  }
-
-  /* Fix vertical alignment of EuiIcons in prepend/append nodes */
-  &__prepend,
-  &__append {
-    .euiIcon {
-      display: block;
-    }
-  }
-}
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
deleted file mode 100644
index 9904605dcca..00000000000
--- a/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * 1. Using specificity to override panel shadow
- * 2. Prevent really long input from overflowing the container.
- */
-
-.euiComboBoxOptionsList {
-  max-height: 200px; // Also used/set in the JS file
-  overflow: hidden;
-
-  &__virtualization {
-    @include euiScrollBar;
-  }
-
-  /* Kibana FTR affordance - without this, Selenium complains about the overlaid
-     text intercepting the button click. Since `title` is always present, and
-     users can't highlight or copy combobox options anyway, we might as well
-     disable clicks on text */
-  .euiTextTruncate {
-    pointer-events: none;
-  }
-}
-
-.euiComboBoxOptionsList__empty {
-  @include euiTextBreakWord; /* 2 */
-  padding: $euiSizeS;
-  text-align: center;
-  word-wrap: break-word;
-}
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_title.scss b/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_title.scss
deleted file mode 100644
index 5a0232e7bc4..00000000000
--- a/packages/eui/src/components/combo_box/combo_box_options_list/_combo_box_title.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * 1. Force each title to be the same height as an option, so that the virtualized scroll logic
- *    works.
- */
-.euiComboBoxTitle {
-  display: flex;
-  width: 100%;
-  padding: ($euiSizeXS + $euiSizeS - 1px) $euiSizeS $euiSizeXS; /* 1 */
-  font-size: $euiFontSizeXS;
-  font-weight: $euiFontWeightBold;
-  color: $euiColorFullShade;
-}
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/_index.scss b/packages/eui/src/components/combo_box/combo_box_options_list/_index.scss
deleted file mode 100644
index 876183f5961..00000000000
--- a/packages/eui/src/components/combo_box/combo_box_options_list/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'combo_box_options_list';
-@import 'combo_box_option';
-@import 'combo_box_title';
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_option.tsx b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
deleted file mode 100644
index 3f9a9636cbe..00000000000
--- a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_option.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * 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, {
-  Component,
-  HTMLAttributes,
-  KeyboardEventHandler,
-  ReactNode,
-  RefCallback,
-} from 'react';
-import classNames from 'classnames';
-
-import { keys } from '../../../services';
-import { EuiComboBoxOptionOption, OptionHandler } from '../types';
-import { CommonProps } from '../../common';
-
-export interface EuiComboBoxOptionProps<T>
-  extends CommonProps,
-    Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
-  children?: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  isFocused: boolean;
-  onClick: OptionHandler<T>;
-  onEnterKey: OptionHandler<T>;
-  option: EuiComboBoxOptionOption<T>;
-  optionRef?: RefCallback<HTMLButtonElement>;
-}
-
-export class EuiComboBoxOption<T> extends Component<EuiComboBoxOptionProps<T>> {
-  onClick = () => {
-    const { onClick, option, disabled } = this.props;
-
-    if (disabled) {
-      return;
-    }
-
-    onClick(option);
-  };
-
-  onKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {
-    if (event.key === keys.ENTER || event.key === keys.SPACE) {
-      event.preventDefault();
-      event.stopPropagation();
-      const { onEnterKey, option, disabled } = this.props;
-
-      if (disabled) {
-        return;
-      }
-
-      onEnterKey(option);
-    }
-  };
-
-  render() {
-    const {
-      children,
-      className,
-      disabled,
-      isFocused,
-      onClick, // eslint-disable-line no-unused-vars
-      onEnterKey, // eslint-disable-line no-unused-vars
-      option,
-      optionRef,
-      ...rest
-    } = this.props;
-
-    const classes = classNames('euiComboBoxOption', className, {
-      'euiComboBoxOption-isDisabled': disabled,
-      'euiComboBoxOption-isFocused': isFocused,
-    });
-
-    const { label } = option;
-
-    return (
-      <button
-        aria-disabled={disabled}
-        aria-selected={isFocused}
-        className={classes}
-        onClick={this.onClick}
-        onKeyDown={this.onKeyDown}
-        ref={optionRef}
-        role="option"
-        title={label}
-        type="button"
-        {...rest}
-      >
-        {children}
-      </button>
-    );
-  }
-}
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts
new file mode 100644
index 00000000000..c0be90ec1a0
--- /dev/null
+++ b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.styles.ts
@@ -0,0 +1,88 @@
+/*
+ * 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,
+  mathWithUnits,
+  euiScrollBarStyles,
+  euiTextBreakWord,
+  euiTextTruncate,
+} from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+
+export const LIST_MAX_HEIGHT = 200;
+
+export const euiComboBoxOptionListStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiComboBoxOptionList: css`
+      ${logicalCSS('max-height', `${LIST_MAX_HEIGHT}px`)}
+      overflow: hidden;
+
+      /* Kibana FTR affordance - without this, Selenium complains about the overlaid
+        text intercepting the button click. Since 'title' is always present, and
+        users can't highlight or copy combobox options anyway, we might as well
+        disable clicks on text */
+      .euiTextTruncate {
+        pointer-events: none;
+      }
+
+      /* We're being lazy here about child selectors/specificity, because EuiComboBox
+       * will be rewritten to use EuiSelectable in the future anyway */
+      .euiComboBoxOption__contentWrapper {
+        display: flex;
+        align-items: center;
+      }
+
+      .euiComboBoxOption__content {
+        flex: 1;
+        text-align: start;
+        ${euiTextTruncate()}
+      }
+
+      .euiComboBoxOption__emptyStateText {
+        flex: 1;
+        text-align: start;
+
+        /* Override EuiText's <p> styling */
+        ${logicalCSS('margin-bottom', 0)}
+      }
+
+      .euiComboBoxOption__enterBadge {
+        ${logicalCSS('margin-left', euiTheme.size.xs)}
+      }
+
+      .euiComboBoxTitle {
+        display: flex;
+        ${logicalCSS('padding-horizontal', euiTheme.size.s)}
+        /* Force each title to be the same height as an option, so that the virtualized scroll logic works */
+        ${logicalCSS(
+          'padding-top',
+          mathWithUnits(euiTheme.size.s, (x) => x + 1)
+        )}
+        ${logicalCSS('padding-bottom', euiTheme.size.xs)}
+        ${euiTitle(euiThemeContext, 'xxxs')}
+      }
+    `,
+
+    euiComboBoxOptionList__virtualization: css`
+      ${euiScrollBarStyles(euiThemeContext)}
+    `,
+
+    euiComboBoxOptionsList__empty: css`
+      padding: ${euiTheme.size.s};
+      text-align: center;
+      /* Prevent really long input from overflowing the container */
+      ${euiTextBreakWord()}
+    `,
+  };
+};
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index 2174cc76055..d70e1914773 100644
--- a/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/packages/eui/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -15,19 +15,21 @@ import {
   ListChildComponentProps,
 } from 'react-window';
 
+import {
+  RenderWithEuiStylesMemoizer,
+  htmlIdGenerator,
+} from '../../../services';
+import { CommonProps } from '../../common';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiHighlight } from '../../highlight';
 import { EuiMark } from '../../mark';
 import { EuiText } from '../../text';
 import { EuiLoadingSpinner } from '../../loading';
-import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import {
   EuiFilterSelectItem,
   FilterChecked,
 } from '../../filter_group/filter_select_item';
-import { htmlIdGenerator } from '../../../services';
-import { CommonProps } from '../../common';
 import { EuiBadge } from '../../badge';
 import { EuiTextTruncate } from '../../text_truncate';
 import { EuiInputPopoverWidthContext } from '../../popover/input_popover';
@@ -39,6 +41,11 @@ import {
   OptionHandler,
 } from '../types';
 import { EuiComboBoxOptionAppendPrepend } from '../utils';
+import { EuiComboBoxTitle } from './combo_box_title';
+import {
+  euiComboBoxOptionListStyles,
+  LIST_MAX_HEIGHT,
+} from './combo_box_options_list.styles';
 
 export type EuiComboBoxOptionsListProps<T> = CommonProps & {
   activeOptionIndex?: number;
@@ -214,6 +221,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
           <EuiComboBoxOptionAppendPrepend
             option={option}
             classNamePrefix="euiComboBoxOption"
+            marginSize="s"
           >
             <span className="euiComboBoxOption__content">
               {renderOption
@@ -327,7 +335,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       ...rest
     } = this.props;
 
-    let emptyStateContent;
+    let emptyStateContent: ReactNode;
 
     if (isLoading) {
       emptyStateContent = (
@@ -448,44 +456,53 @@ export class EuiComboBoxOptionsList<T> extends Component<
       );
     }
 
-    const emptyState = emptyStateContent ? (
-      <EuiText size="xs" className="euiComboBoxOptionsList__empty">
-        {emptyStateContent}
-      </EuiText>
-    ) : undefined;
-
     const numVisibleOptions =
       matchingOptions.length < 7 ? matchingOptions.length : 7;
     const height = numVisibleOptions * (rowHeight + 1); // Add one for the border
 
     // bounded by max-height of .euiComboBoxOptionsList
-    const boundedHeight = height > 200 ? 200 : height;
-
-    const optionsList = (
-      <FixedSizeList
-        className="euiComboBoxOptionsList__virtualization"
-        height={boundedHeight}
-        onScroll={onScroll}
-        itemCount={matchingOptions.length}
-        itemSize={rowHeight}
-        itemData={matchingOptions}
-        ref={this.setListRef}
-        innerElementType={this.ListInnerElement}
-        width={this.context}
-      >
-        {this.ListRow}
-      </FixedSizeList>
-    );
+    const boundedHeight = height > LIST_MAX_HEIGHT ? LIST_MAX_HEIGHT : height;
 
     return (
-      <div
-        className="euiComboBoxOptionsList"
-        data-test-subj={classNames('comboBoxOptionsList', dataTestSubj)}
-        ref={listRef}
-        {...rest}
-      >
-        {emptyState || optionsList}
-      </div>
+      <RenderWithEuiStylesMemoizer>
+        {(stylesMemoizer) => {
+          const styles = stylesMemoizer(euiComboBoxOptionListStyles);
+          return (
+            <div
+              css={styles.euiComboBoxOptionList}
+              className="euiComboBoxOptionsList"
+              data-test-subj={classNames('comboBoxOptionsList', dataTestSubj)}
+              ref={listRef}
+              {...rest}
+            >
+              {emptyStateContent ? (
+                <EuiText
+                  size="xs"
+                  css={styles.euiComboBoxOptionsList__empty}
+                  className="euiComboBoxOptionsList__empty"
+                >
+                  {emptyStateContent}
+                </EuiText>
+              ) : (
+                <FixedSizeList
+                  css={styles.euiComboBoxOptionList__virtualization}
+                  className="euiComboBoxOptionsList__virtualization"
+                  height={boundedHeight}
+                  onScroll={onScroll}
+                  itemCount={matchingOptions.length}
+                  itemSize={rowHeight}
+                  itemData={matchingOptions}
+                  ref={this.setListRef}
+                  innerElementType={this.ListInnerElement}
+                  width={this.context}
+                >
+                  {this.ListRow}
+                </FixedSizeList>
+              )}
+            </div>
+          );
+        }}
+      </RenderWithEuiStylesMemoizer>
     );
   }
 }
diff --git a/packages/eui/src/components/combo_box/combo_box_options_list/index.ts b/packages/eui/src/components/combo_box/combo_box_options_list/index.ts
index 3ed44a970fd..41cc731001f 100644
--- a/packages/eui/src/components/combo_box/combo_box_options_list/index.ts
+++ b/packages/eui/src/components/combo_box/combo_box_options_list/index.ts
@@ -8,6 +8,4 @@
 
 export type { EuiComboBoxOptionsListProps } from './combo_box_options_list';
 export { EuiComboBoxOptionsList } from './combo_box_options_list';
-export type { EuiComboBoxOptionProps } from './combo_box_option';
-export { EuiComboBoxOption } from './combo_box_option';
 export { EuiComboBoxTitle } from './combo_box_title';
diff --git a/packages/eui/src/components/combo_box/utils.test.tsx b/packages/eui/src/components/combo_box/utils.test.tsx
index 03423f5272a..4be93b8f24a 100644
--- a/packages/eui/src/components/combo_box/utils.test.tsx
+++ b/packages/eui/src/components/combo_box/utils.test.tsx
@@ -25,7 +25,7 @@ describe('EuiComboBoxOptionAppendPrepend', () => {
     ).toMatchInlineSnapshot(`
       <div>
         <span
-          class="testA__prepend"
+          class="testA__prepend emotion-EuiComboBoxOptionAppendPrepend"
         >
           Hello
         </span>
@@ -46,7 +46,7 @@ describe('EuiComboBoxOptionAppendPrepend', () => {
       <div>
         Hello world
         <span
-          class="testB__append"
+          class="testB__append emotion-EuiComboBoxOptionAppendPrepend"
         >
           world
         </span>
@@ -65,13 +65,13 @@ describe('EuiComboBoxOptionAppendPrepend', () => {
     ).toMatchInlineSnapshot(`
       <div>
         <span
-          class="testC__prepend"
+          class="testC__prepend emotion-EuiComboBoxOptionAppendPrepend"
         >
           Hello
         </span>
         Hello world
         <span
-          class="testC__append"
+          class="testC__append emotion-EuiComboBoxOptionAppendPrepend"
         >
           world
         </span>
diff --git a/packages/eui/src/components/combo_box/utils.tsx b/packages/eui/src/components/combo_box/utils.tsx
index 56c892bd485..ee17f28dc34 100644
--- a/packages/eui/src/components/combo_box/utils.tsx
+++ b/packages/eui/src/components/combo_box/utils.tsx
@@ -8,6 +8,9 @@
 
 import React, { PropsWithChildren } from 'react';
 
+import { useEuiTheme } from '../../services';
+import { logicalStyle } from '../../global_styling';
+
 import { EuiComboBoxOptionOption } from './types';
 
 /**
@@ -17,19 +20,37 @@ export const EuiComboBoxOptionAppendPrepend = <T,>({
   children,
   option,
   classNamePrefix,
+  marginSize = 'xs',
 }: PropsWithChildren & {
   option?: EuiComboBoxOptionOption<T>;
   classNamePrefix?: string;
+  marginSize?: 's' | 'xs' | 'xxs';
 }) => {
+  const { euiTheme } = useEuiTheme();
+  const margin = euiTheme.size[marginSize];
+
   return (
     <>
       {option?.prepend && (
-        <span className={`${classNamePrefix}__prepend`}>{option.prepend}</span>
+        <span
+          className={`${classNamePrefix}__prepend`}
+          css={{ ...logicalStyle('margin-right', margin), ...centerIcons }}
+        >
+          {option.prepend}
+        </span>
       )}
       {children}
       {option?.append && (
-        <span className={`${classNamePrefix}__append`}>{option.append}</span>
+        <span
+          className={`${classNamePrefix}__append`}
+          css={{ ...logicalStyle('margin-left', margin), ...centerIcons }}
+        >
+          {option.append}
+        </span>
       )}
     </>
   );
 };
+
+// Fix vertical alignment of EuiIcons in prepend/append nodes
+const centerIcons = { '.euiIcon': { display: 'block' } };
diff --git a/packages/eui/src/components/index.scss b/packages/eui/src/components/index.scss
index b309fa399c6..2daaa063c25 100644
--- a/packages/eui/src/components/index.scss
+++ b/packages/eui/src/components/index.scss
@@ -1,5 +1,4 @@
 // Components
 
-@import 'combo_box/index';
 @import 'datagrid/index';
 @import 'form/index';
diff --git a/packages/eui/src/themes/amsterdam/overrides/_combo_box.scss b/packages/eui/src/themes/amsterdam/overrides/_combo_box.scss
deleted file mode 100644
index f1df5630b64..00000000000
--- a/packages/eui/src/themes/amsterdam/overrides/_combo_box.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-.euiComboBox {
-  // Round the left border when we append a label
-  &--appended {
-    .euiFormControlLayout__childrenWrapper {
-      border-top-left-radius: $euiFormControlBorderRadius;
-      border-bottom-left-radius: $euiFormControlBorderRadius;
-    }
-
-    // Half size rounded left corners when compressed
-    .euiFormControlLayout--compressed {
-      .euiFormControlLayout__childrenWrapper {
-        border-top-left-radius: $euiFormControlCompressedBorderRadius;
-        border-bottom-left-radius: $euiFormControlCompressedBorderRadius;
-      }
-    }
-
-    // No rounded corners when we have both appended and prepended labels.
-    // This includes full height and compressed height comboboxes.
-    &.euiComboBox--prepended {
-      .euiFormControlLayout__childrenWrapper {
-        border-radius: 0;
-      }
-
-      .euiFormControlLayout--compressed {
-        .euiFormControlLayout__childrenWrapper {
-          border-radius: 0;
-        }
-      }
-    }
-  }
-
-  // Round the right border when we prepend a label
-  &--prepended {
-    .euiFormControlLayout__childrenWrapper {
-      border-top-right-radius: $euiFormControlBorderRadius;
-      border-bottom-right-radius: $euiFormControlBorderRadius;
-    }
-
-    // Half size rounded right corners when compressed
-    .euiFormControlLayout--compressed {
-      .euiFormControlLayout__childrenWrapper {
-        border-top-right-radius: $euiFormControlCompressedBorderRadius;
-        border-bottom-right-radius: $euiFormControlCompressedBorderRadius;
-      }
-    }
-  }
-}
diff --git a/packages/eui/src/themes/amsterdam/overrides/_index.scss b/packages/eui/src/themes/amsterdam/overrides/_index.scss
index ba2afa490fd..3f8e7154dbe 100644
--- a/packages/eui/src/themes/amsterdam/overrides/_index.scss
+++ b/packages/eui/src/themes/amsterdam/overrides/_index.scss
@@ -1,4 +1,3 @@
-@import 'combo_box';
 @import 'data_grid';
 @import 'form_control_layout';
 @import 'form_control_layout_delimited';