[Emotion] Convert EuiFormControlLayoutDelimited (2/3)

packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_delimited.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiFormControlLayoutDelimited is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFormControlLayout euiFormControlLayoutDelimited testClass1 testClass2 emotion-euiFormControlLayout-group-euiTestCss"
+  class="euiFormControlLayout euiFormControlLayoutDelimited testClass1 testClass2 emotion-euiFormControlLayout-group-delimited-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
@@ -34,7 +34,7 @@ exports[`EuiFormControlLayoutDelimited is rendered 1`] = `
 
 exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a node 1`] = `
 <div
-  class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group"
+  class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited"
 >
   <div
     class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"
@@ -62,7 +62,7 @@ exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a node 1`]
 
 exports[`EuiFormControlLayoutDelimited props delimiter is rendered as a string 1`] = `
 <div
-  class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group"
+  class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited"
 >
   <div
     class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"

packages/eui/src/components/form/form_control_layout/_form_control_layout_delimited.scss

@@ -13,24 +13,6 @@
     max-width: none;
   }
 
-  // Target when the euiFormControlLayout is disabled without specifying the full class name in case it ever changes
-  &[class*='-isDisabled'] {
-    @include euiFormControlDisabledStyle;
-
-    .euiFormControlLayout__childrenWrapper {
-      background-color: $euiFormBackgroundDisabledColor;
-    }
-  }
-
-  // Target when the euiFormControlLayout is readOnly without specifying the full class name in case it ever changes
-  &[class*='-readOnly'] {
-    @include euiFormControlReadOnlyStyle;
-
-    .euiFormControlLayout__childrenWrapper {
-      background-color: $euiFormBackgroundReadOnlyColor;
-    }
-  }
-
   &--isInvalid .euiFormControlLayout__childrenWrapper {
     @include euiFormControlInvalidStyle;
   }

packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 {
+  euiFormControlDisabledStyles,
+  euiFormControlReadOnlyStyles,
+} from '../form.styles';
+
+export const euiFormControlLayoutDelimitedStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  return {
+    // Appended onto existing  `euiFormControlLayout` styles
+    delimited: css``,
+    disabled: css(euiFormControlDisabledStyles(euiThemeContext)),
+    readOnly: css(euiFormControlReadOnlyStyles(euiThemeContext)),
+  };
+};

packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx

@@ -14,6 +14,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { EuiIcon } from '../../icon';
 import { EuiText } from '../../text';
@@ -22,6 +23,7 @@ import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
 } from './form_control_layout';
+import { euiFormControlLayoutDelimitedStyles } from './form_control_layout_delimited.styles';
 
 export type EuiFormControlLayoutDelimitedProps =
   Partial<EuiFormControlLayoutProps> & {
@@ -51,9 +53,17 @@ export const EuiFormControlLayoutDelimited: FunctionComponent<
     'euiFormControlLayoutDelimited--isInvalid': showInvalidState,
   });
 
+  const styles = useEuiMemoizedStyles(euiFormControlLayoutDelimitedStyles);
+  const cssStyles = [
+    styles.delimited,
+    rest.isDisabled && styles.disabled,
+    rest.readOnly && styles.readOnly,
+  ];
+
   return (
     <EuiFormControlLayout
       isDelimited
+      css={cssStyles}
       className={classes}
       iconsPosition="static"
       {...rest}