@atlaskit/editor-plugin-table 7.6.2 → 7.6.4

package/src/ui/common-styles.ts

@@ -288,72 +288,59 @@ const tableWrapperStyles = () => {
   }
 };
 
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
-export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
-  .${ClassName.LAYOUT_BUTTON} button {
-    background: ${token('color.background.neutral', N20A)};
-    color: ${token('color.icon', N300)};
-    cursor: none;
-  }
-
-  .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
-    background: ${token('color.background.neutral.hovered', B300)};
-    color: ${token('color.icon', 'white')} !important;
-    cursor: pointer;
+// re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
+export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
+  ${tableSharedStyle()};
+  ${columnControlsLineMarker()};
+  ${hoveredDeleteButton()};
+  ${hoveredCell()};
+  ${hoveredWarningCell};
+  ${props.featureFlags?.tableDragAndDrop && insertLine()};
+  ${resizeHandle(props.featureFlags?.tableDragAndDrop)};
+  ${rangeSelectionStyles};
+
+  .${ClassName.LAST_ITEM_IN_CELL} {
+    margin-bottom: 0;
   }
 
-  .ProseMirror {
-    ${tableSharedStyle()};
-    ${columnControlsLineMarker()};
-    ${hoveredDeleteButton()};
-    ${hoveredCell()};
-    ${hoveredWarningCell};
-    ${props.featureFlags?.tableDragAndDrop && insertLine()};
-    ${resizeHandle(props.featureFlags?.tableDragAndDrop)};
-    ${rangeSelectionStyles};
-
-    .${ClassName.LAST_ITEM_IN_CELL} {
-      margin-bottom: 0;
+  .${ClassName.TABLE_NODE_WRAPPER} {
+    td.${ClassName.TABLE_CELL}, th.${ClassName.TABLE_HEADER_CELL} {
+      position: relative;
+      overflow: visible;
     }
 
-    .${ClassName.TABLE_NODE_WRAPPER} {
-      td.${ClassName.TABLE_CELL}, th.${ClassName.TABLE_HEADER_CELL} {
-        position: relative;
-        overflow: visible;
-      }
+    td.${ClassName.TABLE_CELL} {
+      background-color: ${tableCellBackgroundColor};
 
-      td.${ClassName.TABLE_CELL} {
-        background-color: ${tableCellBackgroundColor};
-
-        // ED-15246: Trello card is visible through a border of a table border
-        // This fixes a border issue caused by relative positioned table cells
-        &::after {
-          height: 100%;
-          content: '';
-          border-left: 1px solid ${tableBorderColor};
-          border-bottom: 1px solid ${tableBorderColor};
-          position: absolute;
-          right: 0px;
-          top: 0px;
-          bottom: 0;
-          width: 100%;
-          display: inline-block;
-          pointer-events: none;
-        }
+      // ED-15246: Trello card is visible through a border of a table border
+      // This fixes a border issue caused by relative positioned table cells
+      &::after {
+        height: 100%;
+        content: '';
+        border-left: 1px solid ${tableBorderColor};
+        border-bottom: 1px solid ${tableBorderColor};
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        bottom: 0;
+        width: 100%;
+        display: inline-block;
+        pointer-events: none;
       }
     }
+  }
 
-    .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
-      ${insertColumnButtonWrapper()}
-    }
+  .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
+    ${insertColumnButtonWrapper()}
+  }
 
-    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
-      ${insertRowButtonWrapper()}
-    }
+  .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
+    ${insertRowButtonWrapper()}
+  }
 
-    ${dragInsertButtonWrapper()}
+  ${dragInsertButtonWrapper()}
 
-    ${dragCornerControlButton()}
+  ${dragCornerControlButton()}
 
     /* Delete button */
     ${DeleteButton()}
@@ -361,323 +348,319 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 
     /* sticky styles */
     .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-      margin-top: ${stickyRowOffsetTop + 2}px;
-      width: ${akEditorTableNumberColumnWidth}px;
-
-      position: fixed !important;
-      z-index: ${akEditorStickyHeaderZIndex} !important;
-      box-shadow: 0px -${stickyRowOffsetTop}px ${token('elevation.surface', 'white')};
-      border-right: 0 none;
-      /* top set by NumberColumn component */
-    }
+    margin-top: ${stickyRowOffsetTop + 2}px;
+    width: ${akEditorTableNumberColumnWidth}px;
+
+    position: fixed !important;
+    z-index: ${akEditorStickyHeaderZIndex} !important;
+    box-shadow: 0px -${stickyRowOffsetTop}px ${token('elevation.surface', 'white')};
+    border-right: 0 none;
+    /* top set by NumberColumn component */
+  }
 
-    .${ClassName.TABLE_STICKY} .${ClassName.CORNER_CONTROLS}.sticky {
-      position: fixed !important;
-      /* needs to be above row controls */
-      z-index: ${akEditorSmallZIndex} !important;
-      background: ${token('elevation.surface', 'white')};
+  .${ClassName.TABLE_STICKY} .${ClassName.CORNER_CONTROLS}.sticky {
+    position: fixed !important;
+    /* needs to be above row controls */
+    z-index: ${akEditorSmallZIndex} !important;
+    background: ${token('elevation.surface', 'white')};
 
-      width: ${tableToolbarSize}px;
-      height: ${tableToolbarSize}px;
-    }
+    width: ${tableToolbarSize}px;
+    height: ${tableToolbarSize}px;
+  }
 
-    .${ClassName.CORNER_CONTROLS}.sticky .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-bottom: 0px none;
-      border-right: 0px none;
+  .${ClassName.CORNER_CONTROLS}.sticky .${ClassName.CONTROLS_CORNER_BUTTON} {
+    border-bottom: 0px none;
+    border-right: 0px none;
 
-      height: ${tableToolbarSize}px;
-      width: ${tableToolbarSize}px;
-    }
+    height: ${tableToolbarSize}px;
+    width: ${tableToolbarSize}px;
+  }
 
-    ${tableStickyHeaderColumnControlsDecorationsStyle()}
+  ${tableStickyHeaderColumnControlsDecorationsStyle()}
 
-    ${tableStickyHeaderFirefoxFixStyle()}
+  ${tableStickyHeaderFirefoxFixStyle()}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
       .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.sticky {
-      position: fixed !important;
-      z-index: ${akEditorStickyHeaderZIndex} !important;
-      display: flex;
-      border-left: ${tableToolbarSize}px solid
-        ${token('elevation.surface', 'white')};
-      margin-left: -${tableToolbarSize}px;
-    }
-
-    .${ClassName.TABLE_STICKY} col:first-of-type {
-      /* moving rows out of a table layout does weird things in Chrome */
-      border-right: 1px solid ${token('elevation.surface', 'green')};
-    }
+    position: fixed !important;
+    z-index: ${akEditorStickyHeaderZIndex} !important;
+    display: flex;
+    border-left: ${tableToolbarSize}px solid
+      ${token('elevation.surface', 'white')};
+    margin-left: -${tableToolbarSize}px;
+  }
 
-    tr.sticky {
-      padding-top: ${stickyRowOffsetTop}px;
-      position: fixed;
-      display: grid;
+  .${ClassName.TABLE_STICKY} col:first-of-type {
+    /* moving rows out of a table layout does weird things in Chrome */
+    border-right: 1px solid ${token('elevation.surface', 'green')};
+  }
 
-      /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */
-      z-index: ${akEditorTableCellOnStickyHeaderZIndex - 5};
+  tr.sticky {
+    padding-top: ${stickyRowOffsetTop}px;
+    position: fixed;
+    display: grid;
 
-      overflow-y: visible;
-      overflow-x: hidden;
+    /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */
+    z-index: ${akEditorTableCellOnStickyHeaderZIndex - 5};
 
-      grid-auto-flow: column;
+    overflow-y: visible;
+    overflow-x: hidden;
 
-      /* background for where controls apply */
-      background: ${token('elevation.surface', 'white')};
-      box-sizing: content-box;
+    grid-auto-flow: column;
 
-      margin-top: 2px;
+    /* background for where controls apply */
+    background: ${token('elevation.surface', 'white')};
+    box-sizing: content-box;
 
-      box-shadow: 0 6px 4px -4px ${token('elevation.shadow.overflow.perimeter', N40A)};
-      margin-left: -1px;
+    margin-top: 2px;
 
-      &.no-pointer-events {
-        pointer-events: none;
-      }
-    }
+    box-shadow: 0 6px 4px -4px ${token('elevation.shadow.overflow.perimeter', N40A)};
+    margin-left: -1px;
 
-    .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
-      left: unset;
-      position: fixed;
-      /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */
-      z-index: ${akEditorTableCellOnStickyHeaderZIndex};
+    &.no-pointer-events {
+      pointer-events: none;
     }
+  }
 
-    .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
-      .${ClassName.TABLE_STICKY_SHADOW} {
-      padding-bottom: ${tableToolbarSize}px;
-    }
+  .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
+    left: unset;
+    position: fixed;
+    /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */
+    z-index: ${akEditorTableCellOnStickyHeaderZIndex};
+  }
 
-    tr.sticky th {
-      border-bottom: ${stickyHeaderBorderBottomWidth}px solid
-        ${tableBorderColor};
-      margin-right: -1px;
-    }
+  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
+    .${ClassName.TABLE_STICKY_SHADOW} {
+    padding-bottom: ${tableToolbarSize}px;
+  }
 
-    .${ClassName.TABLE_STICKY} tr.sticky > th:last-child {
-      border-right-width: 1px;
-    }
+  tr.sticky th {
+    border-bottom: ${stickyHeaderBorderBottomWidth}px solid ${tableBorderColor};
+    margin-right: -1px;
+  }
 
-    /* add left edge for first cell */
-    .${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
-      margin-left: 0px;
-    }
+  .${ClassName.TABLE_STICKY} tr.sticky > th:last-child {
+    border-right-width: 1px;
+  }
 
-    /* add a little bit so the scroll lines up with the table */
-    .${ClassName.TABLE_STICKY} tr.sticky::after {
-      content: ' ';
-      width: ${insertColumnButtonOffset + 1}px;
-    }
+  /* add left edge for first cell */
+  .${ClassName.TABLE_STICKY} tr.sticky > th:first-of-type {
+    margin-left: 0px;
+  }
 
-    /* To fix jumpiness caused in Chrome Browsers for sticky headers */
-    .${ClassName.TABLE_STICKY} .sticky + tr {
-      min-height: 0px;
-    }
+  /* add a little bit so the scroll lines up with the table */
+  .${ClassName.TABLE_STICKY} tr.sticky::after {
+    content: ' ';
+    width: ${insertColumnButtonOffset + 1}px;
+  }
 
-    /* move resize line a little in sticky bar */
-    .${ClassName.TABLE_CONTAINER}.${ClassName.TABLE_STICKY} {
-      tr.sticky
-        td.${ClassName.WITH_RESIZE_LINE},
-        tr.sticky
-        th.${ClassName.WITH_RESIZE_LINE} {
-        .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-          right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1}px;
-        }
-      }
+  /* To fix jumpiness caused in Chrome Browsers for sticky headers */
+  .${ClassName.TABLE_STICKY} .sticky + tr {
+    min-height: 0px;
+  }
 
-      /* when selected put it back to normal -- :not selector would be nicer */
+  /* move resize line a little in sticky bar */
+  .${ClassName.TABLE_CONTAINER}.${ClassName.TABLE_STICKY} {
+    tr.sticky
+      td.${ClassName.WITH_RESIZE_LINE},
       tr.sticky
-        td.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL},
-        tr.sticky
-        th.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL} {
-        .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-          right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
-        }
+      th.${ClassName.WITH_RESIZE_LINE} {
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
+        right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1}px;
       }
     }
 
+    /* when selected put it back to normal -- :not selector would be nicer */
     tr.sticky
-      .${ClassName.HOVERED_CELL},
+      td.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL},
       tr.sticky
-      .${ClassName.SELECTED_CELL} {
-      z-index: 1;
+      th.${ClassName.WITH_RESIZE_LINE}.${ClassName.SELECTED_CELL} {
+      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
+        right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
+      }
     }
+  }
 
-    .${ClassName.WITH_CONTROLS} tr.sticky {
-      padding-top: ${tableControlsSpacing}px;
-    }
+  tr.sticky .${ClassName.HOVERED_CELL}, tr.sticky .${ClassName.SELECTED_CELL} {
+    z-index: 1;
+  }
 
-    .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
-      .${ClassName.NUMBERED_COLUMN}
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-      margin-top: ${tableControlsSpacing + 2}px;
-    }
+  .${ClassName.WITH_CONTROLS} tr.sticky {
+    padding-top: ${tableControlsSpacing}px;
+  }
 
-    .${ClassName.CORNER_CONTROLS}.sticky {
-      border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
-        ${token('elevation.surface', 'white')};
-    }
+  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
+    .${ClassName.NUMBERED_COLUMN}
+    .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
+    margin-top: ${tableControlsSpacing + 2}px;
+  }
+
+  .${ClassName.CORNER_CONTROLS}.sticky {
+    border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
+      ${token('elevation.surface', 'white')};
+  }
 
-    ${sentinelStyles}
-    ${OverflowShadow(props.featureFlags?.tableDragAndDrop)}
+  ${sentinelStyles}
+  ${OverflowShadow(props.featureFlags?.tableDragAndDrop)}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
-      height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts
-    }
+    height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts
+  }
 
-    .less-padding {
-      padding: 0 ${tablePadding}px;
+  .less-padding {
+    padding: 0 ${tablePadding}px;
 
-      .${ClassName.DRAG_ROW_CONTROLS_WRAPPER},
-        .${ClassName.ROW_CONTROLS_WRAPPER} {
-        padding: 0 ${tablePadding}px;
+    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER},
+      .${ClassName.ROW_CONTROLS_WRAPPER} {
+      padding: 0 ${tablePadding}px;
 
-        // https://product-fabric.atlassian.net/browse/ED-16386
-        // Fixes issue where the extra padding that is added here throws off the position
-        // of the rows control dot
-        &::after {
-          right: 6px !important;
-        }
+      // https://product-fabric.atlassian.net/browse/ED-16386
+      // Fixes issue where the extra padding that is added here throws off the position
+      // of the rows control dot
+      &::after {
+        right: 6px !important;
       }
+    }
 
-      .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
-        padding: 0 ${tablePadding}px;
-      }
+    .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+      padding: 0 ${tablePadding}px;
+    }
 
-      &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
-        padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
-      }
-      .${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
-        width: ${tableOverflowShadowWidth}px;
-      }
+    &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
+      padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
+    }
+    .${ClassName.TABLE_LEFT_SHADOW}, .${ClassName.TABLE_RIGHT_SHADOW} {
+      width: ${tableOverflowShadowWidth}px;
+    }
 
-      .${ClassName.TABLE_LEFT_SHADOW} {
-        left: 6px;
-      }
+    .${ClassName.TABLE_LEFT_SHADOW} {
+      left: 6px;
+    }
 
-      .${ClassName.TABLE_RIGHT_SHADOW} {
-        left: calc(100% - 6px);
-      }
+    .${ClassName.TABLE_RIGHT_SHADOW} {
+      left: calc(100% - 6px);
     }
+  }
 
-    > .${ClassName.NODEVIEW_WRAPPER} {
-      /**
+  > .${ClassName.NODEVIEW_WRAPPER} {
+    /**
        * Prevent margins collapsing, aids with placing the gap-cursor correctly
        * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
        *
        * TODO: Enable this, many tests will fail!
        * border-top: 1px solid transparent;
        */
-    }
+  }
 
-    /* Breakout only works on top level unless wrapped in fragment mark */
-    ${breakoutWidthStyling()}
+  /* Breakout only works on top level unless wrapped in fragment mark */
+  ${breakoutWidthStyling()}
 
-    ${columnControlsDecoration()};
-    ${rowControlsWrapperDotStyle()};
+  ${columnControlsDecoration()};
+  ${rowControlsWrapperDotStyle()};
 
-    /* Corner controls */
-    .${ClassName.CORNER_CONTROLS} {
-      width: ${tableToolbarSize + 1}px;
-      height: ${cornerControlHeight}px;
-      display: none;
+  /* Corner controls */
+  .${ClassName.CORNER_CONTROLS} {
+    width: ${tableToolbarSize + 1}px;
+    height: ${cornerControlHeight}px;
+    display: none;
 
-      .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
-        position: relative;
+    .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
+      position: relative;
 
-        ${InsertMarker(
-          `
+      ${InsertMarker(
+        `
           left: -11px;
           top: 9px;
         `,
-        )};
-      }
+      )};
     }
+  }
 
-    .${ClassName.CORNER_CONTROLS}.sticky {
-      .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
-        /* sticky row insert dot overlaps other row insert and messes things up */
-        display: none !important;
-      }
+  .${ClassName.CORNER_CONTROLS}.sticky {
+    .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
+      /* sticky row insert dot overlaps other row insert and messes things up */
+      display: none !important;
     }
+  }
 
-    .${ClassName.CONTROLS_CORNER_BUTTON} {
-      position: absolute;
-      top: 0;
-      width: ${tableToolbarSize + 1}px;
-      height: ${tableToolbarSize + 1}px;
-      border: 1px solid ${tableBorderColor};
-      border-radius: 0;
-      border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableHeaderCellBackgroundColor};
-      box-sizing: border-box;
-      padding: 0;
-      :focus {
-        outline: none;
-      }
-    }
-    .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-color: ${tableBorderSelectedColor};
-      background: ${tableToolbarSelectedColor};
+  .${ClassName.CONTROLS_CORNER_BUTTON} {
+    position: absolute;
+    top: 0;
+    width: ${tableToolbarSize + 1}px;
+    height: ${tableToolbarSize + 1}px;
+    border: 1px solid ${tableBorderColor};
+    border-radius: 0;
+    border-top-left-radius: ${tableBorderRadiusSize}px;
+    background: ${tableHeaderCellBackgroundColor};
+    box-sizing: border-box;
+    padding: 0;
+    :focus {
+      outline: none;
     }
+  }
+  .active .${ClassName.CONTROLS_CORNER_BUTTON} {
+    border-color: ${tableBorderSelectedColor};
+    background: ${tableToolbarSelectedColor};
+  }
 
-    .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
-      .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
-        width: ${getBooleanFF('platform.editor.custom-table-width')
-          ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1
-          : akEditorTableToolbarSize + akEditorTableNumberColumnWidth}px;
-      }
-      .${ClassName.ROW_CONTROLS} .${ClassName.CONTROLS_BUTTON} {
-        border-right-width: 0;
-      }
+  .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
+    .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
+      width: ${getBooleanFF('platform.editor.custom-table-width')
+        ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1
+        : akEditorTableToolbarSize + akEditorTableNumberColumnWidth}px;
     }
-
-    :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
-      border-color: ${tableBorderSelectedColor};
-      background: ${tableToolbarSelectedColor};
-      cursor: pointer;
+    .${ClassName.ROW_CONTROLS} .${ClassName.CONTROLS_BUTTON} {
+      border-right-width: 0;
     }
+  }
 
-    :not(.${ClassName.IS_RESIZING})
-      .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-      border-color: ${tableBorderDeleteColor};
-      background: ${tableToolbarDeleteColor};
-    }
+  :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
+    border-color: ${tableBorderSelectedColor};
+    background: ${tableToolbarSelectedColor};
+    cursor: pointer;
+  }
 
-    /* Row controls */
-    .${ClassName.ROW_CONTROLS} {
-      width: ${tableToolbarSize}px;
-      box-sizing: border-box;
-      display: none;
-      position: relative;
+  :not(.${ClassName.IS_RESIZING})
+    .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
+    border-color: ${tableBorderDeleteColor};
+    background: ${tableToolbarDeleteColor};
+  }
 
-      ${InsertMarker(
-        `
+  /* Row controls */
+  .${ClassName.ROW_CONTROLS} {
+    width: ${tableToolbarSize}px;
+    box-sizing: border-box;
+    display: none;
+    position: relative;
+
+    ${InsertMarker(
+      `
         bottom: -1px;
         left: -11px;
       `,
-      )};
+    )};
 
-      .${ClassName.ROW_CONTROLS_INNER} {
-        display: flex;
-        flex-direction: column;
-      }
-      .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:last-child > button {
-        border-bottom-left-radius: ${tableBorderRadiusSize}px;
-      }
-      .${ClassName.ROW_CONTROLS_BUTTON_WRAP} {
-        position: relative;
-        margin-top: -1px;
-      }
-      .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:hover,
-        .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.active,
-        .${ClassName.CONTROLS_BUTTON}:hover {
-        z-index: ${akEditorUnitZIndex};
-      }
+    .${ClassName.ROW_CONTROLS_INNER} {
+      display: flex;
+      flex-direction: column;
+    }
+    .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:last-child > button {
+      border-bottom-left-radius: ${tableBorderRadiusSize}px;
+    }
+    .${ClassName.ROW_CONTROLS_BUTTON_WRAP} {
+      position: relative;
+      margin-top: -1px;
+    }
+    .${ClassName.ROW_CONTROLS_BUTTON_WRAP}:hover,
+      .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.active,
+      .${ClassName.CONTROLS_BUTTON}:hover {
+      z-index: ${akEditorUnitZIndex};
+    }
 
-      ${HeaderButton(
-        `
+    ${HeaderButton(
+      `
         border-bottom: 1px solid ${tableBorderColor};
         border-right: 0px;
         border-radius: 0;
@@ -695,264 +678,250 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
           top: 0;
         }
       `,
-      )}
-    }
-
-    .${ClassName.DRAG_ROW_CONTROLS} {
-      display: grid;
-      align-items: center;
-      position: absolute;
-      z-index: ${akEditorUnitZIndex};
+    )}
+  }
 
-      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
-        position: absolute;
-        align-self: end;
-        height: 100%;
-        width: 18px;
-      }
+  .${ClassName.DRAG_ROW_CONTROLS} {
+    display: grid;
+    align-items: center;
+    position: absolute;
+    z-index: ${akEditorUnitZIndex};
 
-      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
-        position: absolute;
-        bottom: -3px;
-        left: 2px;
-        background-color: ${token(
-          'color.background.accent.gray.subtler',
-          '#C1C7D0',
-        )};
-        height: 4px;
-        width: 4px;
-        border-radius: 50%;
-        pointer-events: none;
-      }
+    .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+      position: absolute;
+      align-self: end;
+      height: 100%;
+      width: 18px;
     }
 
-    .${ClassName.DRAG_COLUMN_CONTROLS} {
-      .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
-        height: 24px;
-        position: absolute;
-        top: ${token('space.negative.150', '-12px')};
-        z-index: ${resizeHandlerZIndex};
-      }
-
-      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
-        position: absolute;
-        height: 24px;
-        width: 100%;
-      }
-
-      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
-        background-color: ${token(
-          'color.background.accent.gray.subtler',
-          '#C1C7D0',
-        )};
-        height: 4px;
-        width: 4px;
-        border-radius: 50%;
-        position: absolute;
-        right: -2px;
-      }
+    .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
+      position: absolute;
+      bottom: -3px;
+      left: 2px;
+      background-color: ${token(
+        'color.background.accent.gray.subtler',
+        '#C1C7D0',
+      )};
+      height: 4px;
+      width: 4px;
+      border-radius: 50%;
+      pointer-events: none;
     }
+  }
 
-    .${ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE} {
-      background: none;
-      border: none;
-      outline: none;
+  .${ClassName.DRAG_COLUMN_CONTROLS} {
+    .${ClassName.DRAG_COLUMN_CONTROLS_INNER} {
+      height: 24px;
       position: absolute;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
+      top: ${token('space.negative.150', '-12px')};
+      z-index: ${resizeHandlerZIndex};
+    }
 
-      :focus {
-        outline: none;
-      }
+    .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
+      position: absolute;
+      height: 24px;
+      width: 100%;
     }
 
-    .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
-      cursor: grab;
-      pointer-events: auto;
+    .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
+      background-color: ${token(
+        'color.background.accent.gray.subtler',
+        '#C1C7D0',
+      )};
+      height: 4px;
+      width: 4px;
+      border-radius: 50%;
+      position: absolute;
+      right: -2px;
+    }
+  }
 
-      line-height: 0;
-      padding: 0;
-      border-radius: 6px;
-      width: max-content;
-      border: 2px solid ${token('elevation.surface', N0)};
+  .${ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE} {
+    background: none;
+    border: none;
+    outline: none;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: transparent;
+    :focus {
       outline: none;
+    }
+  }
 
-      &.placeholder {
-        background-color: transparent;
-        border: 2px solid transparent;
+  .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
+    cursor: grab;
+    pointer-events: auto;
+
+    line-height: 0;
+    padding: 0;
+    border-radius: 6px;
+    width: max-content;
+    border: 2px solid ${token('elevation.surface', N0)};
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: transparent;
+    outline: none;
+
+    &.placeholder {
+      background-color: transparent;
+      border: 2px solid transparent;
+    }
+
+    &.${ClassName.DRAG_HANDLE_DISABLED} {
+      cursor: pointer;
+      & svg {
+        & > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
+          fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
+        }
+        & > rect {
+          fill: ${token('color.background.accent.gray.subtlest', '#F4F5F7')};
+        }
+        & > g > rect {
+          fill: ${token('color.icon.disabled', '#BFDBF847')};
+        }
       }
+    }
 
-      &.${ClassName.DRAG_HANDLE_DISABLED} {
-        cursor: pointer;
-        & svg {
-          & > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
-            fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
-          }
-          & > rect {
-            fill: ${token('color.background.accent.gray.subtlest', '#F4F5F7')};
-          }
-          & > g > rect {
-            fill: ${token('color.icon.disabled', '#BFDBF847')};
-          }
+    &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
+      & svg {
+        rect {
+          fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
+        }
+        g {
+          fill: ${token('color.icon.subtle', '#626f86')};
         }
       }
 
-      &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
-        & svg {
+      &:hover {
+        svg {
           rect {
-            fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
+            fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
           }
           g {
-            fill: ${token('color.icon.subtle', '#626f86')};
+            fill: ${token('color.icon.inverse', '#FFF')};
           }
         }
+      }
 
-        &:hover {
-          svg {
-            rect {
-              fill: ${token('color.background.accent.blue.subtle', '#579DFF')};
-            }
-            g {
-              fill: ${token('color.icon.inverse', '#FFF')};
-            }
-          }
+      &:active {
+        cursor: grabbing;
+      }
+
+      &.selected {
+        :focus {
+          outline: 2px solid ${token('color.border.focused', '#2684FF')};
+          outline-offset: 1px;
         }
 
         &:active {
-          cursor: grabbing;
+          outline: none;
         }
 
-        &.selected {
-          :focus {
-            outline: 2px solid ${token('color.border.focused', '#2684FF')};
-            outline-offset: 1px;
-          }
-
-          &:active {
-            outline: none;
+        svg {
+          rect {
+            fill: ${token('color.background.accent.blue.subtle', '#579dff')};
           }
-
-          svg {
-            rect {
-              fill: ${token('color.background.accent.blue.subtle', '#579dff')};
-            }
-            g {
-              fill: ${token('color.icon.inverse', '#fff')};
-            }
+          g {
+            fill: ${token('color.icon.inverse', '#fff')};
           }
         }
+      }
 
-        &.danger {
-          svg {
-            rect {
-              fill: ${token(
-                'color.background.accent.red.subtler.pressed',
-                '#F87462',
-              )};
-            }
-            g {
-              fill: ${token('color.border.inverse', '#FFF')};
-            }
+      &.danger {
+        svg {
+          rect {
+            fill: ${token(
+              'color.background.accent.red.subtler.pressed',
+              '#F87462',
+            )};
+          }
+          g {
+            fill: ${token('color.border.inverse', '#FFF')};
           }
         }
       }
     }
+  }
 
-    ${floatingColumnControls()}
+  ${floatingColumnControls()}
 
-    :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-      ${HeaderButtonHover()}
-      ${HeaderButtonDanger()}
-    }
+  :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
+    ${HeaderButtonHover()}
+    ${HeaderButtonDanger()}
+  }
 
-    /* Numbered column */
-    .${ClassName.NUMBERED_COLUMN} {
-      position: relative;
-      float: right;
-      margin-left: ${getBooleanFF('platform.editor.custom-table-width')
-        ? akEditorTableToolbarSize
-        : akEditorTableToolbarSize - 1}px;
-      top: ${props.featureFlags?.tableDragAndDrop
-        ? 0
-        : akEditorTableToolbarSize}px;
-      width: ${akEditorTableNumberColumnWidth + 1}px;
-      box-sizing: border-box;
-    }
+  /* Numbered column */
+  .${ClassName.NUMBERED_COLUMN} {
+    position: relative;
+    float: right;
+    margin-left: ${getBooleanFF('platform.editor.custom-table-width')
+      ? akEditorTableToolbarSize
+      : akEditorTableToolbarSize - 1}px;
+    top: ${props.featureFlags?.tableDragAndDrop
+      ? 0
+      : akEditorTableToolbarSize}px;
+    width: ${akEditorTableNumberColumnWidth + 1}px;
+    box-sizing: border-box;
+  }
 
-    .${ClassName.NUMBERED_COLUMN_BUTTON} {
-      border: 1px solid ${tableBorderColor};
-      box-sizing: border-box;
-      margin-top: -1px;
-      padding-bottom: 2px;
-      padding: 10px 2px;
-      text-align: center;
-      font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableHeaderCellBackgroundColor};
-      color: ${tableTextColor};
-      border-color: ${tableBorderColor};
-
-      :first-child:not(style),
-      style:first-child + * {
-        margin-top: 0;
-      }
-      :last-child {
-        border-bottom: 1px solid ${tableBorderColor};
-      }
+  .${ClassName.NUMBERED_COLUMN_BUTTON} {
+    border: 1px solid ${tableBorderColor};
+    box-sizing: border-box;
+    margin-top: -1px;
+    padding-bottom: 2px;
+    padding: 10px 2px;
+    text-align: center;
+    font-size: ${relativeFontSizeToBase16(fontSize())};
+    background-color: ${tableHeaderCellBackgroundColor};
+    color: ${tableTextColor};
+    border-color: ${tableBorderColor};
+
+    :first-child:not(style),
+    style:first-child + * {
+      margin-top: 0;
     }
-
-    // add a background above the first numbered column cell when sticky header is engaged
-    // which hides the table when scrolling
-    .${ClassName.TABLE_STICKY} {
-      .${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}:first-of-type::after {
-        content: '';
-        display: block;
-        height: 33px;
-        width: 100%;
-        background-color: ${token('elevation.surface', 'white')};
-        position: absolute;
-
-        // the extra pixel is accounting for borders
-        top: -34px;
-        left: -1px;
-      }
+    :last-child {
+      border-bottom: 1px solid ${tableBorderColor};
     }
+  }
 
-    .${ClassName.WITH_CONTROLS} {
-      .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
-        display: block;
-      }
-      .${ClassName.NUMBERED_COLUMN} {
-        padding-left: ${getBooleanFF('platform.editor.custom-table-width')
-          ? 0
-          : 1}px;
+  // add a background above the first numbered column cell when sticky header is engaged
+  // which hides the table when scrolling
+  .${ClassName.TABLE_STICKY} {
+    .${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}:first-of-type::after {
+      content: '';
+      display: block;
+      height: 33px;
+      width: 100%;
+      background-color: ${token('elevation.surface', 'white')};
+      position: absolute;
 
-        .${ClassName.NUMBERED_COLUMN_BUTTON} {
-          border-left: 0 none;
-        }
+      // the extra pixel is accounting for borders
+      top: -34px;
+      left: -1px;
+    }
+  }
 
-        .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-          border-bottom: 1px solid ${tableBorderSelectedColor};
-          border-color: ${tableBorderSelectedColor};
-          background-color: ${tableToolbarSelectedColor};
-          position: relative;
-          z-index: ${akEditorUnitZIndex};
-          color: ${token('color.text.selected', N0)};
-        }
-      }
+  .${ClassName.WITH_CONTROLS} {
+    .${ClassName.CORNER_CONTROLS}, .${ClassName.ROW_CONTROLS} {
+      display: block;
     }
-    :not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}) {
-        cursor: pointer;
+    .${ClassName.NUMBERED_COLUMN} {
+      padding-left: ${getBooleanFF('platform.editor.custom-table-width')
+        ? 0
+        : 1}px;
+
+      .${ClassName.NUMBERED_COLUMN_BUTTON} {
+        border-left: 0 none;
       }
-      .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
+
+      .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
         border-bottom: 1px solid ${tableBorderSelectedColor};
         border-color: ${tableBorderSelectedColor};
         background-color: ${tableToolbarSelectedColor};
@@ -960,145 +929,177 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
         z-index: ${akEditorUnitZIndex};
         color: ${token('color.text.selected', N0)};
       }
-      .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${tableToolbarDeleteColor};
-        border: 1px solid ${tableBorderDeleteColor};
-        border-left: 0;
-        color: ${token('color.text.danger', R500)};
-        position: relative;
-        z-index: ${akEditorUnitZIndex};
-      }
     }
-
-    /* Table */
-    .${ClassName.TABLE_NODE_WRAPPER} > table {
-      table-layout: fixed;
-      white-space: normal;
-      border-top: none;
-      // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
-      margin-right: -1px;
-      // Allows better positioning for the shadow sentinels - ED-16668
+  }
+  :not(.${ClassName.IS_RESIZING}) .${ClassName.WITH_CONTROLS} {
+    .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}) {
+      cursor: pointer;
+    }
+    .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
+      border-bottom: 1px solid ${tableBorderSelectedColor};
+      border-color: ${tableBorderSelectedColor};
+      background-color: ${tableToolbarSelectedColor};
       position: relative;
+      z-index: ${akEditorUnitZIndex};
+      color: ${token('color.text.selected', N0)};
+    }
+    .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
+      background-color: ${tableToolbarDeleteColor};
+      border: 1px solid ${tableBorderDeleteColor};
+      border-left: 0;
+      color: ${token('color.text.danger', R500)};
+      position: relative;
+      z-index: ${akEditorUnitZIndex};
+    }
+  }
 
-      > tbody > tr {
-        white-space: pre-wrap;
-      }
+  /* Table */
+  .${ClassName.TABLE_NODE_WRAPPER} > table {
+    table-layout: fixed;
+    white-space: normal;
+    border-top: none;
+    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
+    margin-right: -1px;
+    // Allows better positioning for the shadow sentinels - ED-16668
+    position: relative;
 
-      .${ClassName.COLUMN_CONTROLS_DECORATIONS} + * {
-        margin-top: 0;
-      }
+    > tbody > tr {
+      white-space: pre-wrap;
+    }
+
+    .${ClassName.COLUMN_CONTROLS_DECORATIONS} + * {
+      margin-top: 0;
+    }
 
-      /*
+    /*
        * Headings have a top margin by default, but we don't want this on the
        * first heading within table header cells.
        *
        * This specifically sets margin-top for the first heading within a header
        * cell when center/right aligned.
        */
-      th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
-        > h1:first-of-type,
-        > h2:first-of-type,
-        > h3:first-of-type,
-        > h4:first-of-type,
-        > h5:first-of-type,
-        > h6:first-of-type {
-          margin-top: 0;
-        }
+    th.${ClassName.TABLE_HEADER_CELL} > .fabric-editor-block-mark {
+      > h1:first-of-type,
+      > h2:first-of-type,
+      > h3:first-of-type,
+      > h4:first-of-type,
+      > h5:first-of-type,
+      > h6:first-of-type {
+        margin-top: 0;
       }
+    }
 
-      .${ClassName.SELECTED_CELL}, .${ClassName.HOVERED_CELL_IN_DANGER} {
-        position: relative;
-      }
-      /* Give selected cells a blue overlay */
-      .${ClassName.SELECTED_CELL}::after,
-        .${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        z-index: ${akEditorSmallZIndex};
-        position: absolute;
-        content: '';
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
+    .${ClassName.SELECTED_CELL}, .${ClassName.HOVERED_CELL_IN_DANGER} {
+      position: relative;
+    }
+    /* Give selected cells a blue overlay */
+    .${ClassName.SELECTED_CELL}::after,
+      .${ClassName.HOVERED_CELL_IN_DANGER}::after {
+      z-index: ${akEditorSmallZIndex};
+      position: absolute;
+      content: '';
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 100%;
+      pointer-events: none;
+    }
+    .${ClassName.SELECTED_CELL} {
+      border: 1px solid ${tableBorderSelectedColor};
+    }
+    .${ClassName.SELECTED_CELL}::after {
+      background: ${tableCellSelectedColor};
+      z-index: ${akEditorSmallZIndex};
+    }
+    th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
+      td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+      background: ${tableCellDeleteColor};
+      z-index: ${akEditorUnitZIndex * 100};
+    }
+    // ED-15246: Trello card is visible through a border of a table border
+    /* ED-19064: To fix when enable header column in the table,
+       and selection the header column, the right border is not tableBorderSelectedColor
+       when deleting the header column, the right border is not tableToolbarDeleteColor */
+    td.${ClassName.HOVERED_CELL},
+      td.${ClassName.SELECTED_CELL},
+      th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL},
+      th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL} {
+      &::after {
+        height: 100%;
         width: 100%;
-        pointer-events: none;
-      }
-      .${ClassName.SELECTED_CELL} {
         border: 1px solid ${tableBorderSelectedColor};
-      }
-      .${ClassName.SELECTED_CELL}::after {
-        background: ${tableCellSelectedColor};
+        content: '';
+        position: absolute;
+        left: -1px;
+        top: -1px;
+        bottom: 0;
         z-index: ${akEditorSmallZIndex};
+        display: inline-block;
+        pointer-events: none;
       }
-      th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
-        td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        background: ${tableCellDeleteColor};
+      &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+        ${tableBorderStyles()};
         z-index: ${akEditorUnitZIndex * 100};
       }
-      // ED-15246: Trello card is visible through a border of a table border
-      /* ED-19064: To fix when enable header column in the table,
-       and selection the header column, the right border is not tableBorderSelectedColor
-       when deleting the header column, the right border is not tableToolbarDeleteColor */
-      td.${ClassName.HOVERED_CELL},
-        td.${ClassName.SELECTED_CELL},
-        th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL},
-        th.${ClassName.TABLE_HEADER_CELL}.${ClassName.HOVERED_CELL} {
-        &::after {
-          height: 100%;
-          width: 100%;
-          border: 1px solid ${tableBorderSelectedColor};
-          content: '';
-          position: absolute;
-          left: -1px;
-          top: -1px;
-          bottom: 0;
-          z-index: ${akEditorSmallZIndex};
-          display: inline-block;
-          pointer-events: none;
-        }
-        &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles()};
-          z-index: ${akEditorUnitZIndex * 100};
-        }
 
-        &.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles()};
-          z-index: ${akEditorUnitZIndex * 100};
-        }
+      &.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
+        ${tableBorderStyles()};
+        z-index: ${akEditorUnitZIndex * 100};
       }
     }
+  }
 
-    // override for DnD controls
-    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
-      position: absolute;
-      margin-top: ${tableMarginTop}px;
-      left: -${tableToolbarSize + 1}px;
-      z-index: ${rowControlsZIndex + 4};
-    }
+  // override for DnD controls
+  .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} {
+    position: absolute;
+    margin-top: ${tableMarginTop}px;
+    left: -${tableToolbarSize + 1}px;
+    z-index: ${rowControlsZIndex + 4};
+  }
 
-    .${ClassName.ROW_CONTROLS_WRAPPER} {
-      position: absolute;
-      /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
-      top: ${tableMarginTop - cornerControlHeight + 1}px;
-      left: -${tableToolbarSize}px;
-    }
+  .${ClassName.ROW_CONTROLS_WRAPPER} {
+    position: absolute;
+    /* top of corner control is table margin top - corner control height + 1 pixel of table border. */
+    top: ${tableMarginTop - cornerControlHeight + 1}px;
+    left: -${tableToolbarSize}px;
+  }
 
-    .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
-      .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
-      z-index: ${akEditorUnitZIndex};
-    }
+  .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW},
+    .${ClassName.ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_LEFT_SHADOW} {
+    z-index: ${akEditorUnitZIndex};
+  }
 
-    .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
-      position: absolute;
-      top: ${tableMarginTop}px;
-    }
+  .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+    position: absolute;
+    top: ${tableMarginTop}px;
+  }
 
-    .${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
-      position: fixed;
-      /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */
-      z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
-    }
+  .${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+    position: fixed;
+    /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */
+    z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
+  }
+
+  ${tableWrapperStyles()}
+`;
 
-    ${tableWrapperStyles()}
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
+  .${ClassName.LAYOUT_BUTTON} button {
+    background: ${token('color.background.neutral', N20A)};
+    color: ${token('color.icon', N300)};
+    cursor: none;
+  }
+
+  .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
+    background: ${token('color.background.neutral.hovered', B300)};
+    color: ${token('color.icon', 'white')} !important;
+    cursor: pointer;
+  }
+
+  .ProseMirror {
+    ${baseTableStyles(props)}
   }
 
   .ProseMirror.${ClassName.IS_RESIZING} {