@atlaskit/editor-plugin-table 39.0.7 → 39.0.8

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 39.0.8
+
+### Patch Changes
+
+- [`b2a0069bb5563`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2a0069bb5563) -
+  Preserve floating table insert controls' original ordering and gaps above sticky headers when
+  platform_editor_sticky_headers_zindex is enabled, preventing row insert dots from covering the
+  popup. Keep media resize handles below deletion highlights and preserve the original gaps between
+  content overlays, resize handles, and sticky masks within the same experiment.
+
 ## 39.0.7
 
 ### Patch Changes

package/dist/cjs/ui/FloatingInsertButton/index.js

@@ -144,13 +144,14 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       if (type === 'column' && (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
         verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
       }
-      // Column inserts sit above the header; row inserts scroll behind it.
+      // Preserve the original popup placement: overflow row inserts and column inserts
+      // sit above the header; other row inserts sit below it.
       // Set the layer on the Popup because its children share its stacking context.
       var zIndex;
-      if (type === 'row' && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_headers_zindex')) {
-        zIndex = (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader;
-      } else if ((0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
         zIndex = (0, _stickyHeaderZIndex.getTableZIndexes)().headerButton;
+      } else if (type === 'row' && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_headers_zindex')) {
+        zIndex = (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader;
       }
       return /*#__PURE__*/_react.default.createElement(_Popup.default, (0, _extends2.default)({
         target: targetCellRef,

package/dist/cjs/ui/common-styles.js

@@ -91,7 +91,7 @@ var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedSty
   return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", "\n\n\t", "\n\n\t", ";\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px\n\t\t\t", ";\n\t\tborder-right: 0 none;\n\t\t", "/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n    .", "\n      .", "\n      .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid\n\t\t\t", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* use :before element to hide table row insert dots when legacy table sticky header is activated */\n\t.", ".", ":has(tr.sticky)::before {\n\t\tcontent: ' ';\n\t\tposition: sticky;\n\t\tpointer-events: none;\n\t\ttop: 0;\n\t\tfloat: left;\n\t\ttransform: translateX(calc(-1 * (", "px + ", ")));\n\t\tmargin-bottom: calc(\n\t\t\t-1 * (", " - 1px + ", " + ", ")\n\t\t);\n\t\theight: calc(", " - 1px + ", " + ", ");\n\t\twidth: calc(", "px + ", ");\n\t\tbackground: linear-gradient(\n\t\t\tto bottom,\n\t\t\t", "\n\t\t\t\t90%,\n\t\t\ttransparent\n\t\t);\n\t\tz-index: ", ";\n\t}\n\t/* Shift the mask left by the numbered column width so it sits to the left of it. */\n\t.", ".", "[data-number-column='true']:has(tr.sticky)::before {\n\t\ttransform: translateX(\n\t\t\tcalc(\n\t\t\t\t-1 * (", "px + ", " + ", "px)\n\t\t\t)\n\t\t);\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\t", "\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\n\t\tth.", "::after {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tposition: absolute;\n\t\t\tright: 0px;\n\t\t\ttop: 0px;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tdisplay: inline-block;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid transparent;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(tr.", ")::before {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(> .", ")\n\t\t> .", " {\n\t\tmargin-top: 0;\n\t}\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", " tr.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", " 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t.", "\n\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.", " {\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.tableView-content-wrap.danger {\n\t\t:not(.", ") .", " {\n\t\t\t.", " {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\t", "\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " > .", " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", ";\n\t\theight: ", ";\n\t\tmargin-left: ", ";\n\t\t", "\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-top: 1px solid ", ";\n\t}\n\n\t.ak-editor-selected-node .", "[data-number-column=\"true\"]:not(.", ") .", " tr:first-of-type th:first-of-type {\n\t\t/* Recolour the number-column corner mask to match the selected cells. Keep this identical\n\t\t   to the .selectedCell ::before rule below \u2014 never set margin-top (the base negative\n\t\t   margin aligns the mask) or radius (rounded generically by data-reaches-* rules). */\n\t\t&::before {\n\t\t\toutline: none;\n\t\t\tborder-left-color: ", ";\n\t\t\t", "\n\t\t\tborder-top-color: ", ";\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\t", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\t", "\n\t}\n\t.", "[data-number-column=\"true\"].", ".", " .", " tr:first-of-type th:first-of-type::before, .", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* Keep column controls above the sticky header in both experiment cohorts. */\n\t\tz-index: ", ";\n\t}\n\n\t", "\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n\n\t", "\n"])), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)(),
   // Only block getSelectionStyles when our replacement (gated by q4) owns the
   // decoration, so node selection is never left unstyled.
-  (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_headers_zindex') ? ".".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat((0, _stickyHeaderZIndex.getTableZIndexes)().resizeHandle, ";\n\t\t}") : '', (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.TABLE_CELL, _consts4.tableCellBackgroundColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.stickyRowOffsetTop, _constants.akEditorTableNumberColumnWidth, _constants.akEditorStickyHeaderZIndex, _consts4.stickyRowOffsetTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(_constants.akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(_consts4.tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(_types2.TableCssClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.CORNER_CONTROLS, _constants.akEditorSmallZIndex, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _consts4.tableToolbarSize, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize, _consts4.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _constants.akEditorStickyHeaderZIndex, _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _types2.TableCssClassName.TABLE_STICKY, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.stickyRowOffsetTop, (0, _stickyHeaderZIndex.getTableZIndexes)().header, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _consts4.stickyHeaderBorderBottomWidth, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.rowControlsZIndex + 5, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2 + 1, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? _constants.akEditorSmallZIndex : "calc(".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ")"), _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ";") : '', _consts4.tableBorderColor, _consts4.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.TABLE_HEADER_CELL, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _table.tableMarginTop, (0, _stickyHeaderZIndex.getTableZIndexes)().mask, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(_table.tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(_table.tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.tableColumnControlsHeight, (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.NATIVE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.NATIVE_STICKY, _constants.akEditorTableNumberColumnWidth, _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _types2.TableCssClassName.WITH_CONTROLS, _consts4.tableControlsSpacing, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableControlsSpacing, _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableControlsSpacing - _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.TABLE_CONTAINER, _constants.akEditorTableNumberColumnWidth + _consts4.tablePadding - 1, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types2.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableToolbarSize + 1, cornerControlHeight, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n          left: -11px;\n          top: 9px;\n        "), _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize + 1, _consts4.tableToolbarSize + 1, _consts4.tableBorderColor, _consts4.tableBorderRadiusSize, _consts4.tableHeaderCellBackgroundColor, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _constants.akEditorTableToolbarSize + _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.CONTROLS_BUTTON, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableBorderDeleteColor, _consts4.tableToolbarDeleteColor, _types2.TableCssClassName.ROW_CONTROLS, _consts4.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n        bottom: -1px;\n        left: -11px;\n      "), _types2.TableCssClassName.ROW_CONTROLS_INNER, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts4.tableBorderRadiusSize, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.CONTROLS_BUTTON, _constants.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n        border-bottom: 1px solid ".concat(_consts4.tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts4.tableToolbarSize, "px;\n\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.rowControlsZIndex + 4, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_COLUMN_CONTROLS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts4.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", (0, _stickyHeaderZIndex.getTableZIndexes)().resizeHandle, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, _types2.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types2.TableCssClassName.NUMBERED_COLUMN, _constants.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _constants.akEditorTableToolbarSize, _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, (0, _constants.relativeSizeToBaseFontSize)(10), (0, _constants.relativeSizeToBaseFontSize)(14), _consts4.tableHeaderCellBackgroundColor, _consts4.tableTextColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, _constants.akEditorSelectedNodeClassName, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _utils.hideNativeBrowserTextSelectionStyles, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _constants.akEditorSmallZIndex, _types2.TableCssClassName.SELECTED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts4.tableBorderSelectedColor, ";"), _types2.TableCssClassName.SELECTED_CELL, _consts4.tableCellSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(_consts4.tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(_consts4.tableBorderDeleteColor, ";"), _consts4.tableBorderDeleteColor, (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL, _consts4.tableBorderSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _roundedTableStyles.roundedTableOverrides)() : '', _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _table.tableMarginTop, _consts4.tableToolbarSize + 1, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_table.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(_table.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize, "px;\n\t\t"), _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _table.tableMarginTop, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(_constants.akEditorTableNumberColumnWidth, "px") : "".concat(_constants.akEditorTableNumberColumnWidth - 1, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_constants.akEditorTableNumberColumnWidth + 1, "px") : "-".concat(_constants.akEditorTableNumberColumnWidth, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
+  (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_headers_zindex') ? ".".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat((0, _stickyHeaderZIndex.getTableZIndexes)().mediaResizeHandle, ";\n\t\t}") : '', (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(_types2.TableCssClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(_consts2.akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.TABLE_CELL, _consts4.tableCellBackgroundColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types2.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.stickyRowOffsetTop, _constants.akEditorTableNumberColumnWidth, _constants.akEditorStickyHeaderZIndex, _consts4.stickyRowOffsetTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(_constants.akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(_consts4.tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(_types2.TableCssClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(_consts4.tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.CORNER_CONTROLS, _constants.akEditorSmallZIndex, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _consts4.tableToolbarSize, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize, _consts4.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _constants.akEditorStickyHeaderZIndex, _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.tableToolbarSize, _types2.TableCssClassName.TABLE_STICKY, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.stickyRowOffsetTop, (0, _stickyHeaderZIndex.getTableZIndexes)().header, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _types2.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, _consts4.stickyHeaderBorderBottomWidth, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", _consts4.rowControlsZIndex + 5, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _dragHandle.DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2 + 1, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.WITH_RESIZE_LINE, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts4.resizeHandlerAreaWidth - _consts4.resizeLineWidth) / 2, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? _constants.akEditorSmallZIndex : "calc(".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ")"), _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat((0, _stickyHeaderZIndex.getTableZIndexes)().header, ";") : '', _consts4.tableBorderColor, _consts4.tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types2.TableCssClassName.TABLE_HEADER_CELL, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _table.tableMarginTop, (0, _stickyHeaderZIndex.getTableZIndexes)().mask, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.NATIVE_STICKY_ACTIVE, _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(_table.tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(_table.tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(_types2.TableCssClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(_types2.TableCssClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.tableColumnControlsHeight, (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.DRAG_ROW_CONTROLS, (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.NATIVE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.NATIVE_STICKY, _constants.akEditorTableNumberColumnWidth, _constants.akEditorTableNumberColumnWidth, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NATIVE_STICKY, _table.tableMarginTop, _types2.TableCssClassName.WITH_CONTROLS, _consts4.tableControlsSpacing, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.TABLE_STICKY, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableControlsSpacing, _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableControlsSpacing - _consts4.tableToolbarSize, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts4.tablePadding, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _types2.TableCssClassName.TABLE_CHROMELESS, _types2.TableCssClassName.TABLE_CONTAINER, _constants.akEditorTableNumberColumnWidth + _consts4.tablePadding - 1, _styles.TableSharedCssClassName.TABLE_LEFT_BORDER, _styles.TableSharedCssClassName.TABLE_RIGHT_BORDER, _types2.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types2.TableCssClassName.CORNER_CONTROLS, _consts4.tableToolbarSize + 1, cornerControlHeight, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n          left: -11px;\n          top: 9px;\n        "), _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableToolbarSize + 1, _consts4.tableToolbarSize + 1, _consts4.tableBorderColor, _consts4.tableBorderRadiusSize, _consts4.tableHeaderCellBackgroundColor, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _constants.akEditorTableToolbarSize + _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.CONTROLS_BUTTON, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts4.tableBorderSelectedColor, _consts4.tableToolbarSelectedColor, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.CONTROLS_CORNER_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableBorderDeleteColor, _consts4.tableToolbarDeleteColor, _types2.TableCssClassName.ROW_CONTROLS, _consts4.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n        bottom: -1px;\n        left: -11px;\n      "), _types2.TableCssClassName.ROW_CONTROLS_INNER, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts4.tableBorderRadiusSize, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types2.TableCssClassName.CONTROLS_BUTTON, _constants.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n        border-bottom: 1px solid ".concat(_consts4.tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts4.tableToolbarSize, "px;\n\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types2.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types2.TableCssClassName.DRAG_ROW_CONTROLS, _consts4.rowControlsZIndex + 4, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types2.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_COLUMN_CONTROLS, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _consts4.tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", (0, _stickyHeaderZIndex.getTableZIndexes)().resizeHandle, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _consts4.tableColumnControlsHeight, _types2.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types2.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, _types2.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", _types2.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", (0, _uiStyles.floatingColumnControls)(), _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types2.TableCssClassName.NUMBERED_COLUMN, _constants.akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : _constants.akEditorTableToolbarSize, _constants.akEditorTableNumberColumnWidth + 1, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, (0, _constants.relativeSizeToBaseFontSize)(10), (0, _constants.relativeSizeToBaseFontSize)(14), _consts4.tableHeaderCellBackgroundColor, _consts4.tableTextColor, _consts4.tableBorderColor, _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_STICKY, props.isDragAndDropEnabled ? _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER : _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.CORNER_CONTROLS, _types2.TableCssClassName.ROW_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableBorderColor, _constants.akEditorSelectedNodeClassName, _types2.TableCssClassName.NUMBERED_COLUMN, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, _utils.hideNativeBrowserTextSelectionStyles, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.IS_RESIZING, _types2.TableCssClassName.WITH_CONTROLS, _types2.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts4.tableToolbarDeleteColor, _consts4.tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", _constants.akEditorUnitZIndex, _types2.TableCssClassName.TABLE_NODE_WRAPPER, _types2.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _constants.akEditorSmallZIndex, _types2.TableCssClassName.SELECTED_CELL, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(_consts4.tableBorderSelectedColor, ";"), _types2.TableCssClassName.SELECTED_CELL, _consts4.tableCellSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(_consts4.tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(_consts4.tableBorderDeleteColor, ";"), _consts4.tableBorderDeleteColor, (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.TABLE_HEADER_CELL, _types2.TableCssClassName.HOVERED_CELL, _consts4.tableBorderSelectedColor, _constants.akEditorSmallZIndex, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, _types2.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), (0, _stickyHeaderZIndex.getTableZIndexes)().dangerOverlay, _consts4.tableCellDeleteColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _roundedTableStyles.roundedTableOverrides)() : '', _types2.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _table.tableMarginTop, _consts4.tableToolbarSize + 1, _types2.TableCssClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(_table.tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(_table.tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(_consts4.tableToolbarSize, "px;\n\t\t"), _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _table.tableMarginTop, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().aboveHeader, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, _constants.akEditorTableNumberColumnWidth + _consts4.dragRowControlsWidth, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_q4_patch_8') ? _table.tableMarginTop - 1 : _table.tableMarginTop, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(_consts2.akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", (0, _stickyHeaderZIndex.getTableZIndexes)().belowHeader, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(_constants.akEditorTableNumberColumnWidth, "px") : "".concat(_constants.akEditorTableNumberColumnWidth - 1, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(_constants.akEditorTableNumberColumnWidth + 1, "px") : "-".concat(_constants.akEditorTableNumberColumnWidth, "px"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
   // doesn't shift it; the calc reproduces the previous top-aligned offset.
   "top: calc(".concat("var(--ds-space-100, 8px)", " - ", _consts4.stickyRowOffsetTop + 1, "px);") : "margin-top: -".concat(_consts4.stickyRowOffsetTop, "px;"), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'none' : "0.5px solid ".concat(_consts4.tableBorderColor), (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "1px solid ".concat(_consts4.tableBorderColor) : 'none', (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom: 1px solid ".concat(_consts4.tableBorderColor, ";") : "", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", _consts4.tableBorderColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_SELECTED, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _consts4.tableBorderSelectedColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(_consts4.tableBorderSelectedColor, ";") : '', _consts4.tableBorderSelectedColor, _consts4.tableHeaderCellSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_SELECTED, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.SELECTED_CELL, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.COLUMN_SELECTED, _consts4.tableBorderSelectedColor, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(_consts4.tableBorderSelectedColor) : '', _consts4.tableBorderSelectedColor, _consts4.tableHeaderCellSelectedColor, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.TABLE_CONTAINER, _types2.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, _types2.TableCssClassName.HOVERED_CELL_IN_DANGER, _types2.TableCssClassName.COLUMN_SELECTED, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Recolour the corner edges to the delete border and composite the translucent danger
   // fill over the mask's gray so it matches the adjacent cells instead of reading as transparent.

package/dist/cjs/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellSelectedColor = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableColumnControlsHeight = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.nativeStickyHeaderZIndex = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragRowControlsWidth = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.colorPaletteColumns = exports.belowNativeStickyHeaderZIndex = exports.aboveNativeStickyHeaderZIndex = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = exports.TABLE_DRAG_MENU_PADDING_TOP = exports.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellSelectedColor = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableDangerOverlayZIndex = exports.tableControlsSpacing = exports.tableContentZIndexOffset = exports.tableColumnControlsHeight = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.nativeStickyHeaderZIndex = exports.loweredNativeStickyHeaderZIndex = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragRowControlsWidth = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.colorPaletteColumns = exports.belowNativeStickyHeaderZIndex = exports.aboveNativeStickyHeaderZIndex = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = exports.TABLE_DRAG_MENU_PADDING_TOP = exports.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _table = require("@atlaskit/editor-common/styles/table");
 var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _types = require("../types");
@@ -66,6 +66,11 @@ var tableColumnControlsHeight = exports.tableColumnControlsHeight = 24;
 var nativeStickyHeaderZIndex = exports.nativeStickyHeaderZIndex = _constants.akEditorTableCellOnStickyHeaderZIndex - 5;
 var aboveNativeStickyHeaderZIndex = exports.aboveNativeStickyHeaderZIndex = nativeStickyHeaderZIndex + 1;
 var belowNativeStickyHeaderZIndex = exports.belowNativeStickyHeaderZIndex = nativeStickyHeaderZIndex - 1;
+// Keep the lowered table layers below block controls (100) and Object Sidebar controls (300).
+var loweredNativeStickyHeaderZIndex = exports.loweredNativeStickyHeaderZIndex = 90;
+var tableDangerOverlayZIndex = exports.tableDangerOverlayZIndex = _constants.akEditorUnitZIndex * 100;
+// Shift the content layers together, keeping the mask below the lowered header controls.
+var tableContentZIndexOffset = exports.tableContentZIndexOffset = stickyRowZIndex - (loweredNativeStickyHeaderZIndex - _constants.akEditorUnitZIndex * 2);
 var dropTargetsZIndex = exports.dropTargetsZIndex = 14;
 var TABLE_SNAP_GAP = exports.TABLE_SNAP_GAP = 9;
 var TABLE_HIGHLIGHT_GAP = exports.TABLE_HIGHLIGHT_GAP = 10;

package/dist/cjs/ui/sticky-header-z-index.js

@@ -11,16 +11,15 @@ var _consts = require("./consts");
 // below block controls (100) and Object Sidebar controls (300).
 var getTableZIndexes = exports.getTableZIndexes = function getTableZIndexes() {
   if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_sticky_headers_zindex')) {
-    var headerZIndex = 90;
-    var tableLayerGap = 10;
     return {
-      header: headerZIndex,
-      aboveHeader: headerZIndex + _editorSharedStyles.akEditorUnitZIndex,
-      belowHeader: headerZIndex - _editorSharedStyles.akEditorUnitZIndex,
-      headerButton: headerZIndex + _editorSharedStyles.akEditorUnitZIndex * 2,
-      mask: headerZIndex - _editorSharedStyles.akEditorUnitZIndex * 2,
-      resizeHandle: headerZIndex - tableLayerGap,
-      dangerOverlay: headerZIndex - tableLayerGap * 2
+      header: _consts.loweredNativeStickyHeaderZIndex,
+      aboveHeader: _consts.loweredNativeStickyHeaderZIndex + _editorSharedStyles.akEditorUnitZIndex,
+      belowHeader: _consts.loweredNativeStickyHeaderZIndex - _editorSharedStyles.akEditorUnitZIndex,
+      headerButton: _consts.loweredNativeStickyHeaderZIndex + (_editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - _consts.nativeStickyHeaderZIndex),
+      mask: _consts.stickyRowZIndex - _consts.tableContentZIndexOffset,
+      resizeHandle: _consts.resizeHandlerZIndex - _consts.tableContentZIndexOffset,
+      dangerOverlay: _consts.tableDangerOverlayZIndex - _consts.tableContentZIndexOffset,
+      mediaResizeHandle: _editorSharedStyles.akRichMediaResizeZIndex - _consts.tableContentZIndexOffset
     };
   }
   return {
@@ -30,6 +29,7 @@ var getTableZIndexes = exports.getTableZIndexes = function getTableZIndexes() {
     headerButton: _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex,
     mask: _consts.stickyRowZIndex,
     resizeHandle: _consts.resizeHandlerZIndex,
-    dangerOverlay: 100
+    dangerOverlay: _consts.tableDangerOverlayZIndex,
+    mediaResizeHandle: _editorSharedStyles.akRichMediaResizeZIndex
   };
 };

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -129,13 +129,14 @@ export class FloatingInsertButton extends React.Component {
     if (type === 'column' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
       verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
     }
-    // Column inserts sit above the header; row inserts scroll behind it.
+    // Preserve the original popup placement: overflow row inserts and column inserts
+    // sit above the header; other row inserts sit below it.
     // Set the layer on the Popup because its children share its stacking context.
     let zIndex;
-    if (type === 'row' && isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
-      zIndex = getTableZIndexes().belowHeader;
-    } else if (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
+    if (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
       zIndex = getTableZIndexes().headerButton;
+    } else if (type === 'row' && isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
+      zIndex = getTableZIndexes().belowHeader;
     }
     return /*#__PURE__*/React.createElement(Popup, _extends({
       target: targetCellRef,

package/dist/es2019/ui/common-styles.js

@@ -255,7 +255,7 @@ expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeS
 	${viewModeSortStyles()};
 
 	${isExperimentEnabled('platform_editor_sticky_headers_zindex') ? `.${ClassName.TABLE_CONTAINER} {
-			--ak-editor-table-resize-handle-z-index: ${getTableZIndexes().resizeHandle};
+			--ak-editor-table-resize-handle-z-index: ${getTableZIndexes().mediaResizeHandle};
 		}` : ''}
 
 	${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `

package/dist/es2019/ui/consts.js

@@ -61,6 +61,11 @@ export const tableColumnControlsHeight = 24;
 export const nativeStickyHeaderZIndex = akEditorTableCellOnStickyHeaderZIndex - 5;
 export const aboveNativeStickyHeaderZIndex = nativeStickyHeaderZIndex + 1;
 export const belowNativeStickyHeaderZIndex = nativeStickyHeaderZIndex - 1;
+// Keep the lowered table layers below block controls (100) and Object Sidebar controls (300).
+export const loweredNativeStickyHeaderZIndex = 90;
+export const tableDangerOverlayZIndex = akEditorUnitZIndex * 100;
+// Shift the content layers together, keeping the mask below the lowered header controls.
+export const tableContentZIndexOffset = stickyRowZIndex - (loweredNativeStickyHeaderZIndex - akEditorUnitZIndex * 2);
 export const dropTargetsZIndex = 14;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;

package/dist/es2019/ui/sticky-header-z-index.js

@@ -1,20 +1,19 @@
-import { akEditorTableCellOnStickyHeaderZIndex, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorTableCellOnStickyHeaderZIndex, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, nativeStickyHeaderZIndex, resizeHandlerZIndex, stickyRowZIndex } from './consts';
+import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, loweredNativeStickyHeaderZIndex, nativeStickyHeaderZIndex, resizeHandlerZIndex, stickyRowZIndex, tableContentZIndexOffset, tableDangerOverlayZIndex } from './consts';
 // Keep table content below its sticky masks and header, and the entire table chrome
 // below block controls (100) and Object Sidebar controls (300).
 export const getTableZIndexes = () => {
   if (isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
-    const headerZIndex = 90;
-    const tableLayerGap = 10;
     return {
-      header: headerZIndex,
-      aboveHeader: headerZIndex + akEditorUnitZIndex,
-      belowHeader: headerZIndex - akEditorUnitZIndex,
-      headerButton: headerZIndex + akEditorUnitZIndex * 2,
-      mask: headerZIndex - akEditorUnitZIndex * 2,
-      resizeHandle: headerZIndex - tableLayerGap,
-      dangerOverlay: headerZIndex - tableLayerGap * 2
+      header: loweredNativeStickyHeaderZIndex,
+      aboveHeader: loweredNativeStickyHeaderZIndex + akEditorUnitZIndex,
+      belowHeader: loweredNativeStickyHeaderZIndex - akEditorUnitZIndex,
+      headerButton: loweredNativeStickyHeaderZIndex + (akEditorTableCellOnStickyHeaderZIndex - nativeStickyHeaderZIndex),
+      mask: stickyRowZIndex - tableContentZIndexOffset,
+      resizeHandle: resizeHandlerZIndex - tableContentZIndexOffset,
+      dangerOverlay: tableDangerOverlayZIndex - tableContentZIndexOffset,
+      mediaResizeHandle: akRichMediaResizeZIndex - tableContentZIndexOffset
     };
   }
   return {
@@ -24,6 +23,7 @@ export const getTableZIndexes = () => {
     headerButton: akEditorTableCellOnStickyHeaderZIndex,
     mask: stickyRowZIndex,
     resizeHandle: resizeHandlerZIndex,
-    dangerOverlay: 100
+    dangerOverlay: tableDangerOverlayZIndex,
+    mediaResizeHandle: akRichMediaResizeZIndex
   };
 };

package/dist/esm/ui/FloatingInsertButton/index.js

@@ -137,13 +137,14 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       if (type === 'column' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
         verticalOffsetCorrection = Math.max(0, targetCellRef.getBoundingClientRect().top - tableRef.getBoundingClientRect().top);
       }
-      // Column inserts sit above the header; row inserts scroll behind it.
+      // Preserve the original popup placement: overflow row inserts and column inserts
+      // sit above the header; other row inserts sit below it.
       // Set the layer on the Popup because its children share its stacking context.
       var zIndex;
-      if (type === 'row' && isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
-        zIndex = getTableZIndexes().belowHeader;
-      } else if (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
+      if (expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') || type === 'column') {
         zIndex = getTableZIndexes().headerButton;
+      } else if (type === 'row' && isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
+        zIndex = getTableZIndexes().belowHeader;
       }
       return /*#__PURE__*/React.createElement(Popup, _extends({
         target: targetCellRef,

package/dist/esm/ui/common-styles.js

@@ -86,7 +86,7 @@ var baseTableStylesWithoutSharedStyle = function baseTableStylesWithoutSharedSty
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\t", ";\n\n\t", "\n\n\t", "\n\n\t", ";\n\n\t.", " {\n\t\ttd.", ", th.", " {\n\t\t\tposition: relative;\n\t\t\toverflow: visible;\n\t\t}\n\n\t\ttd.", " {\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t\tborder-bottom: 1px solid ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 0px;\n\t\t\t\ttop: 0px;\n\t\t\t\tbottom: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t", "\n\n\t", "\n\n\t/* Delete button */\n\t", "\n\t/* Ends Delete button */\n\n\t/* sticky styles */\n\t.", " > .", " .", " .", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t\twidth: ", "px;\n\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tbox-shadow: 0px -", "px\n\t\t\t", ";\n\t\tborder-right: 0 none;\n\t\t", "/* top set by NumberColumn component */\n\t}\n\n\t.", " .", ".sticky {\n\t\tposition: fixed !important;\n\t\t/* needs to be above row controls */\n\t\tz-index: ", " !important;\n\t\tbackground: ", ";\n\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t}\n\n\t.", ".sticky .", " {\n\t\tborder-bottom: 0px none;\n\t\tborder-right: 0px none;\n\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\n\t", "\n\n\t", "\n\n    .", "\n      .", "\n      .", ".sticky {\n\t\tposition: fixed !important;\n\t\tz-index: ", " !important;\n\t\tdisplay: flex;\n\t\tborder-left: ", "px solid\n\t\t\t", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.", " col:first-of-type {\n\t\t/* moving rows out of a table layout does weird things in Chrome */\n\t\tborder-right: 1px solid\n\t\t\t", ";\n\t}\n\n\ttr.sticky {\n\t\tpadding-top: ", "px;\n\t\tposition: fixed;\n\t\tdisplay: grid;\n\n\t\t/* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n\t\tz-index: ", ";\n\n\t\toverflow-y: visible;\n\t\toverflow-x: hidden;\n\n\t\tgrid-auto-flow: column;\n\n\t\t/* background for where controls apply */\n\t\tbackground: ", ";\n\t\tbox-sizing: content-box;\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\n\t\tmargin-left: -1px;\n\n\t\t&.no-pointer-events {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.tableView-content-wrap:has(.tableView-content-wrap):has(\n\t\t\t.", "\n\t\t) {\n\t\tpadding-left: unset;\n\t}\n\n\t.tableView-content-wrap:has(.", ") {\n\t\tpadding-left: 15px;\n\t}\n\n\ttr.sticky th {\n\t\tborder-bottom: ", "px solid ", ";\n\t\tmargin-right: -1px;\n\t}\n\n\t.", " tr.sticky > th:last-child {\n\t\tborder-right-width: 1px;\n\t}\n\n\t/* add left edge for first cell */\n\t.", " tr.sticky > th:first-of-type {\n\t\tmargin-left: 0px;\n\t}\n\n\t/* add a little bit so the scroll lines up with the table */\n\t.", " tr.sticky::after {\n\t\tcontent: ' ';\n\t\twidth: ", "px;\n\t}\n\n\t/* use :before element to hide table row insert dots when legacy table sticky header is activated */\n\t.", ".", ":has(tr.sticky)::before {\n\t\tcontent: ' ';\n\t\tposition: sticky;\n\t\tpointer-events: none;\n\t\ttop: 0;\n\t\tfloat: left;\n\t\ttransform: translateX(calc(-1 * (", "px + ", ")));\n\t\tmargin-bottom: calc(\n\t\t\t-1 * (", " - 1px + ", " + ", ")\n\t\t);\n\t\theight: calc(", " - 1px + ", " + ", ");\n\t\twidth: calc(", "px + ", ");\n\t\tbackground: linear-gradient(\n\t\t\tto bottom,\n\t\t\t", "\n\t\t\t\t90%,\n\t\t\ttransparent\n\t\t);\n\t\tz-index: ", ";\n\t}\n\t/* Shift the mask left by the numbered column width so it sits to the left of it. */\n\t.", ".", "[data-number-column='true']:has(tr.sticky)::before {\n\t\ttransform: translateX(\n\t\t\tcalc(\n\t\t\t\t-1 * (", "px + ", " + ", "px)\n\t\t\t)\n\t\t);\n\t}\n\n\t/* To fix jumpiness caused in Chrome Browsers for sticky headers */\n\t.", " .sticky + tr {\n\t\tmin-height: 0px;\n\t}\n\n\t/* move resize line a little in sticky bar */\n\t.", ".", " {\n\t\ttr.sticky td.", ", tr.sticky th.", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\n\t\t/* when selected put it back to normal -- :not selector would be nicer */\n\t\ttr.sticky\n\t\t\ttd.", ".", ",\n\t\t\ttr.sticky\n\t\t\tth.", ".", " {\n\t\t\t.", "::after {\n\t\t\t\tright: ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.sticky .", ", tr.sticky .", " {\n\t\tz-index: 1;\n\t}\n\n\ttr.", " {\n\t\tposition: sticky;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\tbox-shadow:\n\t\t\tinset -1px 1px ", ",\n\t\t\tinset 1px -1px ", ";\n\n\t\t&.", " {\n\t\t\t", "\n\t\t\tbox-shadow:\n\t\t\t\tinset -1px 1px ", ",\n\t\t\t\tinset 1px -1px ", ",\n\t\t\t\t0 6px 4px -4px ", ";\n\t\t}\n\n\t\tth.", "::after {\n\t\t\theight: 100%;\n\t\t\tcontent: '';\n\t\t\tborder-left: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t\tposition: absolute;\n\t\t\tright: 0px;\n\t\t\ttop: 0px;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tdisplay: inline-block;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t/** Adds mask above sticky header to prevent table content from bleeding through on scroll */\n\t.", ":has(tr.", ")::before {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\ttop: 0;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\theight: 0;\n\t\tmargin-bottom: -", "px;\n\t\tposition: sticky;\n\t\tborder-top: ", "px solid transparent;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(tr.", ")::before {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\n\t/** Corrects position of drag row controls when sticky header top mask is present */\n\t.", ":has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t}\n\n\t.", ":has(> .", ")\n\t\t> .", " {\n\t\tmargin-top: 0;\n\t}\n\n\t.", "[data-table-header-is-stuck='true']:has(.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\tz-index: ", ";\n\t}\n\n\t/** Corrects position of numbered column when sticky header top mask is present */\n\t.", ":has(.", " tr.", ")\n\t\t> .", "\n\t\t> div\n\t\t> .", " {\n\t\ttop: ", "px;\n\t}\n\n\t/** Expands the mask to encompass the numbered column */\n\t.pm-table-wrapper:has([data-number-column='true'] tr.", ")::before {\n\t\tmargin-left: -", "px;\n\t\twidth: calc(100% + ", "px);\n\t}\n\n\t/** Hides the header row drag handle when the position:sticky table header is 'stuck'\n\t *\n\t * 1. We check that the header is 'stuck'.\n\t * - The table container has attribute data-table-header-is-stuck='true' when sticky positioned header is 'stuck'\n\t *\n\t * 2. We check that the header row drag handle is in the first row or the first row is selected\n\t * - The header row drag handle has the data-row-index='0' attribute (i.e. hovered), OR\n\t * - The header row drag handle has the data-selected-row-index='0' attribute\n\t * \t\tAND does not have the data-handle-appearance='default' attribute (i.e. selected)\n\t*/\n\t.", ".", "[data-table-header-is-stuck='true']\n\t.", ":is([data-row-index='0'], [data-selected-row-index='0']:not([data-handle-appearance='default'])) {\n\t\tvisibility: hidden;\n\t}\n\n\t.", " tr.", " {\n\t\ttop: ", "px;\n\t}\n\n\t.", " tr.sticky {\n\t\tpadding-top: ", "px;\n\t}\n\n\t.", ".", "\n\t\t> .", "\n\t\t.", "\n\t\t.", ":first-of-type {\n\t\tmargin-top: ", "px;\n\t}\n\n\t.", ".sticky {\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t}\n\n\t", "\n\t", "\n\n\t.less-padding {\n\t\tpadding: 0 ", "px;\n\n\t\t.", ", .", " {\n\t\t\tpadding: 0 ", "px;\n\n\t\t\t/* https://product-fabric.atlassian.net/browse/ED-16386\n\t\t\tFixes issue where the extra padding that is added here throws off the position\n\t\t\tof the rows control dot */\n\t\t\t&::after {\n\t\t\t\tright: 6px !important;\n\t\t\t}\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -4px;\n\t\t}\n\n\t\t.", " {\n\t\t\tpadding: 0 ", "px;\n\t\t}\n\n\t\t.", ".", " {\n\t\t\tleft: -8px;\n\t\t}\n\n\t\t&.", "[data-number-column='true'] {\n\t\t\tpadding-left: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tleft: 8px;\n\t\t}\n\t\t.", " {\n\t\t\tright: 8px;\n\t\t}\n\t}\n\n\t> .", " {\n\t\t/**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n\t}\n\n\t/* Breakout only works on top level unless wrapped in fragment mark */\n\t", "\n\n\t", ";\n\t", ";\n\n\t/* Corner controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tdisplay: none;\n\n\t\t.", " {\n\t\t\tposition: relative;\n\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.", ".sticky {\n\t\t.", " {\n\t\t\t/* sticky row insert dot overlaps other row insert and messes things up */\n\t\t\tdisplay: none !important;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tborder: 1px solid ", ";\n\t\tborder-radius: 0;\n\t\tborder-top-left-radius: ", "px;\n\t\tbackground: ", ";\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.active .", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column='true'] {\n\t\t.", ", .", " {\n\t\t\twidth: ", "px;\n\t\t}\n\t\t.", " .", " {\n\t\t\tborder-right-width: 0;\n\t\t}\n\t}\n\n\t:not(.", ") .", ":hover {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t\tcursor: pointer;\n\t}\n\n\t:not(.", ")\n\t\t.", ".", " {\n\t\tborder-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t/* Row controls */\n\t.", " {\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: relative;\n\n\t\t", ";\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.", ":last-child > button {\n\t\t\tborder-bottom-left-radius: ", "px;\n\t\t}\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tmargin-top: -1px;\n\t\t}\n\t\t.", ":hover,\n\t\t\t.", ".active,\n\t\t\t.", ":hover {\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\t}\n\n\t.", " {\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\talign-self: end;\n\t\t\theight: 100%;\n\t\t\twidth: 18px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tbottom: -3px;\n\t\t\tleft: 2px;\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " {\n\t\t\theight: ", "px;\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\theight: 4px;\n\t\t\twidth: 4px;\n\t\t\tborder-radius: 50%;\n\t\t\tposition: absolute;\n\t\t\tright: -2px;\n\t\t}\n\t}\n\n\t.", " {\n\t\tbackground: none;\n\t\tborder: none;\n\t\toutline: none;\n\t\tposition: absolute;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t.", " {\n\t\tcursor: grab;\n\t\tpointer-events: auto;\n\n\t\tline-height: 0;\n\t\tpadding: 0;\n\t\tborder-radius: 6px;\n\t\twidth: max-content;\n\t\tborder: 2px solid ", ";\n\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground: transparent;\n\t\toutline: none;\n\n\t\t&.placeholder {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t}\n\n\t\t&.", " {\n\t\t\tcursor: pointer;\n\t\t\t& svg {\n\t\t\t\t& > rect.", " {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\t& > g > rect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:not(.", ") {\n\t\t\t& svg {\n\t\t\t\trect {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t\tg {\n\t\t\t\t\tfill: ", ";\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcursor: grabbing;\n\t\t\t}\n\n\t\t\t&.selected {\n\t\t\t\t:focus {\n\t\t\t\t\toutline: 2px solid ", ";\n\t\t\t\t\toutline-offset: 1px;\n\t\t\t\t}\n\n\t\t\t\t&:active {\n\t\t\t\t\toutline: none;\n\t\t\t\t}\n\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.danger {\n\t\t\t\tsvg {\n\t\t\t\t\trect {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t\tg {\n\t\t\t\t\t\tfill: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t:not(.", ") .", " {\n\t\t", "\n\t\t", "\n\t}\n\n\t/* Numbered column */\n\t.", " {\n\t\tposition: relative;\n\t\tfloat: right;\n\t\tmargin-left: ", "px;\n\t\ttop: ", "px;\n\t\twidth: ", "px;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbox-sizing: border-box;\n\t\tmargin-top: -1px;\n\t\tpadding-bottom: 2px;\n\t\tpadding: ", " 2px;\n\t\ttext-align: center;\n\t\tfont-size: ", ";\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\tborder-color: ", ";\n\n\t\t:first-child:not(style),\n\t\tstyle:first-child + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\t\t:last-child {\n\t\t\tborder-bottom: 1px solid ", ";\n\t\t}\n\t}\n\n\t/* add a background above the first numbered column cell when sticky header is engaged\n\twhich hides the table when scrolling */\n\t.", "\n\t\t> .", " {\n\t\t.", ":first-of-type::after {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\theight: 33px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\n\t\t\t/* the extra pixel is accounting for borders */\n\t\t\ttop: -34px;\n\t\t\tleft: -1px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tdisplay: block;\n\t\t}\n\t\t.", " {\n\t\t\tpadding-left: 0px;\n\n\t\t\t.", " {\n\t\t\t\tborder-left: 0 none;\n\t\t\t}\n\n\t\t\t.", ".active {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* nested tables should be ignored when we apply border-left: 0 to the parent table */\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tborder-left: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Apply numbered column styling when table is selected via text selection (e.g., block menu) */\n\t.", " {\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t:not(.", ") .", " {\n\t\t.", ":not(.", ") {\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.", ":not(.", "):hover {\n\t\t\t", "\n\t\t}\n\t\t.", ".", " {\n\t\t\tbackground-color: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-left: 0;\n\t\t\tcolor: ", ";\n\t\t\tposition: relative;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.tableView-content-wrap.danger {\n\t\t:not(.", ") .", " {\n\t\t\t.", " {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tborder-left: 0;\n\t\t\t\tcolor: ", ";\n\t\t\t\tposition: relative;\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* Table */\n\t.", " > table {\n\t\ttable-layout: fixed;\n\t\twhite-space: normal;\n\t\tborder-top: none;\n\t\t/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */\n\t\tmargin-right: -1px;\n\t\t/* Allows better positioning for the shadow sentinels - ED-16668 */\n\t\tposition: relative;\n\n\t\t> tbody > tr {\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\n\t\t.", " + * {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t/*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n\t\tth.", " > .fabric-editor-block-mark {\n\t\t\t> h1:first-of-type,\n\t\t\t> h2:first-of-type,\n\t\t\t> h3:first-of-type,\n\t\t\t> h4:first-of-type,\n\t\t\t> h5:first-of-type,\n\t\t\t> h6:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tposition: relative;\n\t\t}\n\t\t/* Give selected cells a blue overlay */\n\t\t.", "::after, .", "::after {\n\t\t\tz-index: ", ";\n\t\t\tposition: absolute;\n\t\t\tcontent: '';\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: 100%;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\t\t/* Override border colors for danger state */\n\t\tth.", ".", ",\n\t\t\ttd.", ".", " {\n\t\t\t", "\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t\ttd.", ",\n\t\t\ttd.", ",\n\t\t\tth.", ".", ",\n\t\t\tth.", ".", " {\n\t\t\t&::after {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: -1px;\n\t\t\t\ttop: -1px;\n\t\t\t\tbottom: 0;\n\t\t\t\tz-index: ", ";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t&.", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t&.", ".", "::after {\n\t\t\t\t", ";\n\t\t\t\tz-index: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n\n\t/* override for DnD controls */\n\t.", " {\n\t\tposition: absolute;\n\t\tmargin-top: ", "px;\n\t\tleft: -", "px;\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\t/* this is to fix the misalignment of the numbered column in live page view mode */\n\t\t", "\n\t}\n\n\t.", " {\n\t\tposition: absolute;\n\t\ttop: ", "px;\n\t}\n\n\t.", " > .", " {\n\t\t/* +2px is to overlap the table border on the sides */\n\t\twidth: calc(anchor-size(width) + 2px);\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\ttop: unset;\n\t\tposition: fixed;\n\t\tposition-area: top center;\n\t\tposition-visibility: anchors-visible;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n\n\t/** Mask for content to the left of the column controls */\n\n\t.", "[data-number-column=\"true\"] .", " > .", "::before {\n\t\tcontent: '';\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\tmargin-left: -", "px;\n\t\twidth: ", "px;\n\t\theight: ", "px;\n\t\tbackground: ", ";\n\t\tz-index: ", ";\n\t}\n\n\t/** Mask for numbered column content to the left of the header row */\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th:first-of-type::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tleft: 0;\n\t\twidth: ", ";\n\t\theight: ", ";\n\t\tmargin-left: ", ";\n\t\t", "\n\t\toutline: ", ";\n\t\tborder-left: ", ";\n\t\t", "\n\t\tbackground: ", ";\n\t\tborder-top: 1px solid ", ";\n\t}\n\n\t.ak-editor-selected-node .", "[data-number-column=\"true\"]:not(.", ") .", " tr:first-of-type th:first-of-type {\n\t\t/* Recolour the number-column corner mask to match the selected cells. Keep this identical\n\t\t   to the .selectedCell ::before rule below \u2014 never set margin-top (the base negative\n\t\t   margin aligns the mask) or radius (rounded generically by data-reaches-* rules). */\n\t\t&::before {\n\t\t\toutline: none;\n\t\t\tborder-left-color: ", ";\n\t\t\t", "\n\t\t\tborder-top-color: ", ";\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", ", .", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\t", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":first-of-type::before, .", "[data-number-column=\"true\"] .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\t", "\n\t}\n\t.", "[data-number-column=\"true\"].", ".", " .", " tr:first-of-type th:first-of-type::before, .", "[data-number-column=\"true\"].", " .", " tr:first-of-type th.", ":not(.", "):first-of-type::before {\n\t\toutline: none;\n\t\tborder-left-color: ", ";\n\t\tborder-top-color: ", ";\n\t\tbackground: ", ";\n\t}\n\n\t.", "[data-number-column=\"true\"] .", " .", " th:first-of-type::before {\n\t\tbox-shadow: 0 6px 4px -4px ", ";\n\t}\n\n\t.", "\n\t\t.", ":not(.", " *) {\n\t\t/* !important to override the inline style in the inner controls component */\n\t\tmargin-top: ", "px !important;\n\t}\n\n\t.", " .", " {\n\t\tposition: fixed;\n\t\t/* Keep column controls above the sticky header in both experiment cohorts. */\n\t\tz-index: ", ";\n\t}\n\n\t", "\n\n\t/* nested tables */\n\t.", " {\n\t\t.", " .", " {\n\t\t\tposition: absolute;\n\t\t\tz-index: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding-bottom: 0px;\n\t\t/* fixes gap cursor height */\n\t\toverflow: auto;\n\t\toverflow-y: hidden;\n\t\tposition: relative;\n\t}\n\n\t.", ".", " {\n\t\toverflow: visible;\n\t}\n\n\t", "\n"])), columnControlsLineMarker(), hoveredDeleteButton(), hoveredCell(), hoveredWarningCell, insertLine(), resizeHandle(),
   // Only block getSelectionStyles when our replacement (gated by q4) owns the
   // decoration, so node selection is never left unstyled.
-  expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), isExperimentEnabled('platform_editor_sticky_headers_zindex') ? ".".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat(getTableZIndexes().resizeHandle, ";\n\t\t}") : '', expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(ClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, ClassName.TABLE_STICKY, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", stickyRowOffsetTop, getTableZIndexes().header, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.NESTED_TABLE_WITH_CONTROLS, ClassName.NESTED_TABLE_WITH_CONTROLS, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", rowControlsZIndex + 5, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", akEditorTableNumberColumnWidth, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.NATIVE_STICKY, tableMarginTop, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? akEditorSmallZIndex : "calc(".concat(getTableZIndexes().header, ")"), tableBorderColor, tableBorderColor, ClassName.NATIVE_STICKY_ACTIVE, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat(getTableZIndexes().header, ";") : '', tableBorderColor, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_HEADER_CELL, tableBorderColor, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, getTableZIndexes().mask, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY_ACTIVE, tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, getTableZIndexes().aboveHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableColumnControlsHeight, ClassName.NATIVE_STICKY, akEditorTableNumberColumnWidth, akEditorTableNumberColumnWidth, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, ClassName.WITH_CONTROLS, ClassName.NATIVE_STICKY, tableMarginTop, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, TableSharedCssClassName.TABLE_LEFT_BORDER, TableSharedCssClassName.TABLE_RIGHT_BORDER, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, rowControlsZIndex + 4, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", getTableZIndexes().resizeHandle, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, tableColumnControlsHeight, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeSizeToBaseFontSize(10), relativeSizeToBaseFontSize(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, akEditorSelectedNodeClassName, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, hideNativeBrowserTextSelectionStyles, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(tableBorderSelectedColor, ";"), ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(tableBorderDeleteColor, ";"), tableBorderDeleteColor, getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableOverrides() : '', ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, ClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(tableToolbarSize, "px;\n\t\t"), ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().aboveHeader, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? isExperimentEnabled('platform_editor_table_q4_patch_8') ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableNumberColumnWidth + dragRowControlsWidth, akEditorTableNumberColumnWidth + dragRowControlsWidth, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(akEditorTableNumberColumnWidth, "px") : "".concat(akEditorTableNumberColumnWidth - 1, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(akEditorTableNumberColumnWidth + 1, "px") : "-".concat(akEditorTableNumberColumnWidth, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
+  expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? rangeSelectionStylesForRoundedTable : rangeSelectionStyles, rangeSelectionStylesForFakeBorders, viewModeSortStyles(), isExperimentEnabled('platform_editor_sticky_headers_zindex') ? ".".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t--ak-editor-table-resize-handle-z-index: ").concat(getTableZIndexes().mediaResizeHandle, ";\n\t\t}") : '', expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "\n\t\t.ak-editor-panel:not([data-panel-type=\"custom\"]) .".concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-blue-subtlest, #E9F2FE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"note\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-purple-subtlest, #F8EEFE)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"tip\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"warning\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-yellow-subtlest, #FEF7C8)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"error\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-red-subtlest, #FFECEB)", ";\n\t\t}\n\t\t.ak-editor-panel[data-panel-type=\"success\"] .").concat(ClassName.TABLE_CONTAINER, " {\n\t\t\t").concat(akEditorTableContainerBg, ": ", "var(--ds-background-accent-green-subtlest, #DCFFF1)", ";\n\t\t}\n\t") : '', expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor, tableBorderColor, tableBorderColor, ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper(), ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper(), dragInsertButtonWrapper(), dragCornerControlButton(), DeleteButton(), ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "\n\t\t\twidth: ".concat(akEditorTableNumberColumnWidth + 1, "px;\n\t\t\tborder-left: 1px solid ").concat(tableBorderColor, ";\n\n\t\t\t/* Keep the new fixed left border in sync with the selected/danger states,\n\t\t\t   which would otherwise leave it the default colour (.active recolours the\n\t\t\t   rest of the border) or drop it entirely (delete-hover sets border-left: 0). */\n\t\t\t&.active {\n\t\t\t\tborder-left-color: ").concat(tableBorderSelectedColor, ";\n\t\t\t}\n\t\t\t&.").concat(ClassName.HOVERED_CELL_IN_DANGER, " {\n\t\t\t\tborder-left: 1px solid ").concat(tableBorderDeleteColor, ";\n\t\t\t}\n\t\t\t") : '', ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", tableToolbarSize, ClassName.TABLE_STICKY, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", stickyRowOffsetTop, getTableZIndexes().header, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.NESTED_TABLE_WITH_CONTROLS, ClassName.NESTED_TABLE_WITH_CONTROLS, stickyHeaderBorderBottomWidth, tableBorderColor, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, insertColumnButtonOffset + 1, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", "var(--ds-space-400, 32px)", "var(--ds-space-200, 16px)", "var(--ds-space-300, 24px)", DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", rowControlsZIndex + 5, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, DRAG_HANDLE_WIDTH, "var(--ds-space-150, 12px)", akEditorTableNumberColumnWidth, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.NATIVE_STICKY, tableMarginTop, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? akEditorSmallZIndex : "calc(".concat(getTableZIndexes().header, ")"), tableBorderColor, tableBorderColor, ClassName.NATIVE_STICKY_ACTIVE, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "z-index: ".concat(getTableZIndexes().header, ";") : '', tableBorderColor, tableBorderColor, "var(--ds-shadow-overflow-perimeter, #1E1F211f)", ClassName.TABLE_HEADER_CELL, tableBorderColor, tableBorderColor, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY, tableMarginTop, tableMarginTop, getTableZIndexes().mask, ClassName.TABLE_NODE_WRAPPER, ClassName.NATIVE_STICKY_ACTIVE, tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? "\n\t/* Borders floor to device pixels at fractional zoom; overlap the sticky row by 1px to avoid a seam. */\n\t.".concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY, ")::before {\n\t\tborder-top: none;\n\t\theight: ").concat(tableMarginTop + 1, "px;\n\t\tmargin-bottom: -").concat(tableMarginTop + 1, "px;\n\t\tbackground: transparent;\n\t}\n\n\t.").concat(ClassName.TABLE_NODE_WRAPPER, ":has(tr.").concat(ClassName.NATIVE_STICKY_ACTIVE, ")::before {\n\t\tborder-top: none;\n\t\tbackground: ").concat(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", ";\n\t}\n\t") : '', ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, tableColumnControlsHeight, getTableZIndexes().aboveHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.DRAG_ROW_CONTROLS, getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.NATIVE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, tableColumnControlsHeight, ClassName.NATIVE_STICKY, akEditorTableNumberColumnWidth, akEditorTableNumberColumnWidth, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.DRAG_ROW_FLOATING_DRAG_HANDLE, ClassName.WITH_CONTROLS, ClassName.NATIVE_STICKY, tableMarginTop, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", sentinelStyles, stickyScrollbarStyles, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_ROW_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tablePadding, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, ClassName.TABLE_CHROMELESS, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, TableSharedCssClassName.TABLE_LEFT_BORDER, TableSharedCssClassName.TABLE_RIGHT_BORDER, ClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), columnControlsDecoration(), rowControlsWrapperDotStyle(), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker("\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor, tableBorderRadiusSize, tableHeaderCellBackgroundColor, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker("\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton("\n        border-bottom: 1px solid ".concat(tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.DRAG_ROW_CONTROLS, rowControlsZIndex + 4, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, ClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_COLUMN_CONTROLS, ClassName.DRAG_COLUMN_CONTROLS_INNER, tableColumnControlsHeight, "var(--ds-space-negative-150, -12px)", getTableZIndexes().resizeHandle, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, tableColumnControlsHeight, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #DDDEE1)", ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, ClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, #FFFFFF)", ClassName.DRAG_HANDLE_DISABLED, ClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", "var(--ds-icon-disabled, #080F214A)", ClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-icon-subtle, #505258)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-border-focused, #4688EC)", "var(--ds-background-accent-blue-subtle, #669DF1)", "var(--ds-icon-inverse, #FFFFFF)", "var(--ds-background-accent-red-subtler-pressed, #FD9891)", "var(--ds-border-inverse, #FFFFFF)", floatingColumnControls(), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize, props.isDragAndDropEnabled ? 0 : akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, relativeSizeToBaseFontSize(10), relativeSizeToBaseFontSize(14), tableHeaderCellBackgroundColor, tableTextColor, tableBorderColor, tableBorderColor, ClassName.TABLE_STICKY, props.isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, #FFFFFF)", ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, ClassName.TABLE_CONTAINER, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor, akEditorSelectedNodeClassName, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, numberedColumnButtonSelectedStyles, hideNativeBrowserTextSelectionStyles, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, numberedColumnButtonSelectedStyles, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, "var(--ds-text-danger, #AE2E24)", akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell borders handled by ::after overlay in rounded mode. */ : "border: 1px solid ".concat(tableBorderSelectedColor, ";"), ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CELL, ClassName.HOVERED_CELL_IN_DANGER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? '' /* Cell border colors are handled by the ::after overlay in rounded mode. */ : "border-left-color: ".concat(tableBorderDeleteColor, ";\n\t\t\tborder-top-color: ").concat(tableBorderDeleteColor, ";"), tableBorderDeleteColor, getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.TABLE_HEADER_CELL, ClassName.HOVERED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, ClassName.HOVERED_NO_HIGHLIGHT, ClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), getTableZIndexes().dangerOverlay, tableCellDeleteColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableOverrides() : '', ClassName.DRAG_ROW_CONTROLS_WRAPPER, tableMarginTop, tableToolbarSize + 1, ClassName.ROW_CONTROLS_WRAPPER, props.isDragAndDropEnabled ? "\n\t\t\tmargin-top: ".concat(tableMarginTop, "px;\n\t\t\ttop: 0;\n\t\t\tleft: -").concat(tableToolbarSize + 1, "px;\n\t\t") : "\n\t\t\t/* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n\t\t\ttop: ".concat(tableMarginTop - cornerControlHeight + 1, "px;\n\t\t\tmargin-top: 0;\n\t\t\tleft: -").concat(tableToolbarSize, "px;\n\t\t"), ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, tableMarginTop, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().aboveHeader, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? isExperimentEnabled('platform_editor_table_q4_patch_8') ? "\n\t\t/* Transparent bottom 1px so the sticky header row's top border stays visible. */\n\t\tpadding-bottom: 1px;\n\t\tbackground-clip: content-box;\n\t\t/* Chrome can fall back to start alignment after zoom, covering the header. */\n\t\talign-self: unsafe end;" : "\n\t\t/* Leave a 1px gap so the sticky header row's top border stays visible. */\n\t\ttranslate: 0 -1px;" : "", ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.DRAG_COLUMN_CONTROLS_WRAPPER, akEditorTableNumberColumnWidth + dragRowControlsWidth, akEditorTableNumberColumnWidth + dragRowControlsWidth, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_q4_patch_8') ? tableMarginTop - 1 : tableMarginTop, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? "var(".concat(akEditorTableContainerBg, ", ", "var(--ds-surface, #FFFFFF)", ")") : "var(--ds-surface, #FFFFFF)", getTableZIndexes().belowHeader, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "".concat(akEditorTableNumberColumnWidth, "px") : "".concat(akEditorTableNumberColumnWidth - 1, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'calc(100% + 2px)' : '100%', expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "-".concat(akEditorTableNumberColumnWidth + 1, "px") : "-".concat(akEditorTableNumberColumnWidth, "px"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Anchor the mask with an explicit `top` so `vertical-align` (data-valign) on the cell
   // doesn't shift it; the calc reproduces the previous top-aligned offset.
   "top: calc(".concat("var(--ds-space-100, 8px)", " - ", stickyRowOffsetTop + 1, "px);") : "margin-top: -".concat(stickyRowOffsetTop, "px;"), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? 'none' : "0.5px solid ".concat(tableBorderColor), expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "1px solid ".concat(tableBorderColor) : 'none', expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom: 1px solid ".concat(tableBorderColor, ";") : "", "var(--ds-background-accent-gray-subtlest, #F0F1F2)", tableBorderColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, tableBorderSelectedColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(tableBorderSelectedColor, ";") : '', tableBorderSelectedColor, tableHeaderCellSelectedColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_SELECTED, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_SELECTED, tableBorderSelectedColor, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? "border-bottom-color: ".concat(tableBorderSelectedColor) : '', tableBorderSelectedColor, tableHeaderCellSelectedColor, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.HOVERED_CELL_IN_DANGER, ClassName.TABLE_CONTAINER, ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_SELECTED, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? // Recolour the corner edges to the delete border and composite the translucent danger
   // fill over the mask's gray so it matches the adjacent cells instead of reading as transparent.

package/dist/esm/ui/consts.js

@@ -61,6 +61,11 @@ export var tableColumnControlsHeight = 24;
 export var nativeStickyHeaderZIndex = akEditorTableCellOnStickyHeaderZIndex - 5;
 export var aboveNativeStickyHeaderZIndex = nativeStickyHeaderZIndex + 1;
 export var belowNativeStickyHeaderZIndex = nativeStickyHeaderZIndex - 1;
+// Keep the lowered table layers below block controls (100) and Object Sidebar controls (300).
+export var loweredNativeStickyHeaderZIndex = 90;
+export var tableDangerOverlayZIndex = akEditorUnitZIndex * 100;
+// Shift the content layers together, keeping the mask below the lowered header controls.
+export var tableContentZIndexOffset = stickyRowZIndex - (loweredNativeStickyHeaderZIndex - akEditorUnitZIndex * 2);
 export var dropTargetsZIndex = 14;
 export var TABLE_SNAP_GAP = 9;
 export var TABLE_HIGHLIGHT_GAP = 10;

package/dist/esm/ui/sticky-header-z-index.js

@@ -1,20 +1,19 @@
-import { akEditorTableCellOnStickyHeaderZIndex, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorTableCellOnStickyHeaderZIndex, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
-import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, nativeStickyHeaderZIndex, resizeHandlerZIndex, stickyRowZIndex } from './consts';
+import { aboveNativeStickyHeaderZIndex, belowNativeStickyHeaderZIndex, loweredNativeStickyHeaderZIndex, nativeStickyHeaderZIndex, resizeHandlerZIndex, stickyRowZIndex, tableContentZIndexOffset, tableDangerOverlayZIndex } from './consts';
 // Keep table content below its sticky masks and header, and the entire table chrome
 // below block controls (100) and Object Sidebar controls (300).
 export var getTableZIndexes = function getTableZIndexes() {
   if (isExperimentEnabled('platform_editor_sticky_headers_zindex')) {
-    var headerZIndex = 90;
-    var tableLayerGap = 10;
     return {
-      header: headerZIndex,
-      aboveHeader: headerZIndex + akEditorUnitZIndex,
-      belowHeader: headerZIndex - akEditorUnitZIndex,
-      headerButton: headerZIndex + akEditorUnitZIndex * 2,
-      mask: headerZIndex - akEditorUnitZIndex * 2,
-      resizeHandle: headerZIndex - tableLayerGap,
-      dangerOverlay: headerZIndex - tableLayerGap * 2
+      header: loweredNativeStickyHeaderZIndex,
+      aboveHeader: loweredNativeStickyHeaderZIndex + akEditorUnitZIndex,
+      belowHeader: loweredNativeStickyHeaderZIndex - akEditorUnitZIndex,
+      headerButton: loweredNativeStickyHeaderZIndex + (akEditorTableCellOnStickyHeaderZIndex - nativeStickyHeaderZIndex),
+      mask: stickyRowZIndex - tableContentZIndexOffset,
+      resizeHandle: resizeHandlerZIndex - tableContentZIndexOffset,
+      dangerOverlay: tableDangerOverlayZIndex - tableContentZIndexOffset,
+      mediaResizeHandle: akRichMediaResizeZIndex - tableContentZIndexOffset
     };
   }
   return {
@@ -24,6 +23,7 @@ export var getTableZIndexes = function getTableZIndexes() {
     headerButton: akEditorTableCellOnStickyHeaderZIndex,
     mask: stickyRowZIndex,
     resizeHandle: resizeHandlerZIndex,
-    dangerOverlay: 100
+    dangerOverlay: tableDangerOverlayZIndex,
+    mediaResizeHandle: akRichMediaResizeZIndex
   };
 };

package/dist/types/ui/consts.d.ts

@@ -50,6 +50,9 @@ export declare const tableColumnControlsHeight = 24;
 export declare const nativeStickyHeaderZIndex: number;
 export declare const aboveNativeStickyHeaderZIndex: number;
 export declare const belowNativeStickyHeaderZIndex: number;
+export declare const loweredNativeStickyHeaderZIndex = 90;
+export declare const tableDangerOverlayZIndex: number;
+export declare const tableContentZIndexOffset: number;
 export declare const dropTargetsZIndex = 14;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;

package/dist/types/ui/sticky-header-z-index.d.ts

@@ -5,6 +5,7 @@ type TableZIndexes = {
     header: number;
     headerButton: number;
     mask: number;
+    mediaResizeHandle: number;
     resizeHandle: number;
 };
 export declare const getTableZIndexes: () => TableZIndexes;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "39.0.7",
+	"version": "39.0.8",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^4.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
-		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/primitives": "^22.6.0",
 		"@atlaskit/tmp-editor-statsig": "^240.0.0",
 		"@atlaskit/toggle": "^17.3.0",
 		"@atlaskit/tokens": "^20.6.0",
@@ -68,7 +68,7 @@
 		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^131.2.0",
+		"@atlaskit/editor-common": "^131.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"