Convert cell styles to Emotion (row cells, header/footer cells, & cell checkboxes)

src/components/table/_responsive.scss

@@ -3,23 +3,6 @@
 
 @include euiBreakpoint('xs', 's') {
   .euiTable.euiTable--responsive {
-    .euiTableRowCell__mobileHeader {
-      // Always truncate
-      @include euiTextTruncate;
-      @include fontSize($euiFontSize * .6875);
-
-      color: $euiColorDarkShade;
-      padding: $euiSizeS;
-      padding-bottom: 0;
-      margin-bottom: -$euiSizeS; // pull up cell content closer
-      min-height: $euiSizeL; // aligns contents of cells if header doesn't exist
-
-      // Remove min-height of cell header if it's the only cell
-      .euiTableRowCell:only-child & {
-        min-height: 0;
-      }
-    }
-
     .euiTableRowCellCheckbox {
       border: none;
     }

src/components/table/table_row_cell.styles.ts

@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
-import { euiFontSize, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiTextTruncate, logicalCSS } from '../../global_styling';
 
 import { euiTableVariables } from './table.styles';
 
@@ -100,5 +100,25 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => {
         }
       `,
     },
+
+    euiTableRowCell__mobileHeader: css`
+      /* Always truncate */
+      ${euiTextTruncate()}
+      font-size: ${euiFontSize(euiThemeContext, 's', {
+        customScale: 'xxs',
+      }).fontSize};
+
+      display: block;
+      color: ${euiTheme.colors.darkShade};
+      padding: ${euiTheme.size.s};
+      /* Pull up cell content closer */
+      padding-block-end: 0;
+      margin-block-end: -${euiTheme.size.s};
+
+      /* Aligns contents of cells if header is empty */
+      .euiTableRowCell:not(:only-child) & {
+        ${logicalCSS('min-height', euiTheme.size.l)}
+      }
+    `,
   };
 };

src/components/table/table_row_cell.tsx

@@ -249,6 +249,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
         {/* Mobile-only header */}
         {mobileOptions.header && (
           <div
+            css={styles.euiTableRowCell__mobileHeader}
             className={`euiTableRowCell__mobileHeader ${showForMobileClasses}`}
           >
             {mobileOptions.header}