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

src/components/table/__snapshots__/table_header_cell.test.tsx.snap

@@ -218,7 +218,7 @@ exports[`sorting renders a button with onSort 1`] = `
         scope="col"
       >
         <button
-          class="euiTableHeaderButton euiTableHeaderButton-isSorted"
+          class="euiTableHeaderButton euiTableHeaderButton-isSorted emotion-euiTableHeaderCell__button"
           data-test-subj="tableHeaderSortButton"
           type="button"
         >

src/components/table/_table.scss

@@ -1,30 +1,3 @@
-.euiTableHeaderButton {
-  @include euiFontSizeS;
-  color: inherit;
-  width: 100%;
-
-  &:hover,
-  &:focus {
-    .euiTableCellContent__text {
-      text-decoration: underline;
-      color: $euiColorPrimary;
-    }
-
-    .euiTableSortIcon {
-      fill: $euiColorPrimary;
-    }
-  }
-}
-
-.euiTableSortIcon {
-  margin-left: $euiSizeXS;
-  flex-shrink: 0; // makes sure the icon doesn't change size because the text is long
-
-  .euiTableHeaderButton-isSorted & {
-    fill: $euiTitleColor;
-  }
-}
-
 .euiTableRow-isExpandedRow {
   &.euiTableRow-isSelectable .euiTableCellContent {
     padding-left: $euiTableCellCheckboxWidth + $euiTableCellContentPadding;

src/components/table/table_cells_shared.styles.ts

@@ -35,6 +35,19 @@ export const euiTableHeaderFooterCellStyles = (
         gap: ${euiTheme.size.xs};
       }
     `,
+    euiTableHeaderCell__button: css`
+      ${logicalCSS('width', '100%')}
+      font-weight: inherit;
+
+      &:hover,
+      &:focus {
+        color: ${euiTheme.colors.primaryText};
+
+        .euiTableCellContent__text {
+          text-decoration: underline;
+        }
+      }
+    `,
     euiTableFooterCell: css`
       ${sharedStyles}
       background-color: ${euiTheme.colors.lightestShade};

src/components/table/table_header_cell.tsx

@@ -181,6 +181,7 @@ export const EuiTableHeaderCell: FunctionComponent<EuiTableHeaderCellProps> = ({
         {onSort && !readOnly ? (
           <button
             type="button"
+            css={styles.euiTableHeaderCell__button}
             className={buttonClasses}
             onClick={onSort}
             data-test-subj="tableHeaderSortButton"