@atlaskit/editor-core 207.19.0 → 207.19.2

package/dist/esm/ui/EditorContentContainer/styles/layout.js

@@ -1,81 +1,22 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
 var gridMediumMaxWidth = 1024;
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
-var columnLayoutSharedStyle = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '[data-layout-section]': _defineProperty({
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'row',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > *': {
-      flex: 1,
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > .unsupportedBlockView-content-wrap': {
-      minWidth: 'initial'
-    }
-  }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
-    flexDirection: 'column'
-  })
-});
-var columnLayoutResponsiveSharedStyle = css({
+var selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
+var selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
+var selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
+var layoutResponsiveSelectedSelector = "&.selected, &:hover, &.selected.danger, &.".concat(akEditorSelectedNodeClassName, ":not(.danger)");
+var layoutSelectedSelector = "&.selected, [data-empty-layout='true'], &:hover, &.selected.danger [data-layout-section], &.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]");
+
+/**
+ * Layout columns styles when advanced layouts experiment is on
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutColumnStylesAdvanced = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout-section]': {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: "var(--ds-space-100, 8px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '& > *': {
-      flex: 1,
-      minWidth: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '& > .unsupportedBlockView-content-wrap': {
-      minWidth: 'initial'
-    }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '.layout-section-container': {
-    containerType: 'inline-size',
-    containerName: 'layout-area'
-  }
-});
-var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
-  return fg('platform_editor_nested_dnd_styles_changes') ?
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
-      marginTop: 0
-    }
-  }) :
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> :not(style):first-child, > style:first-child + *': {
-      marginTop: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .ProseMirror-gapcursor:first-child + *, > style:first-child + .ProseMirror-gapcursor + *': {
-      marginTop: 0
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .ProseMirror-gapcursor:first-child + span + *': {
-      marginTop: 0
-    }
-  });
-};
-var layoutColumnStyles = function layoutColumnStyles() {
-  return editorExperiment('advanced_layouts', true) ?
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_defineProperty(_defineProperty({
+  '.ProseMirror [data-layout-section]': _defineProperty(_defineProperty({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '> [data-layout-column]': {
       margin: '0 4px'
@@ -104,9 +45,16 @@ var layoutColumnStyles = function layoutColumnStyles() {
       left: 4,
       borderRadius: "var(--ds-border-radius, 3px)"
     }
-  }])) :
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-  css(_defineProperty({
+  }])
+});
+
+/**
+ * Layout columns styles when advanced layouts experiment is off
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutColumnStylesNotAdvanced = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror [data-layout-section]': _defineProperty({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-layout-column] + [data-layout-column]': {
       // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
@@ -117,107 +65,139 @@ var layoutColumnStyles = function layoutColumnStyles() {
     '[data-layout-column] + [data-layout-column]': {
       marginLeft: 0
     }
-  }));
-};
-var layoutSectionStyles = function layoutSectionStyles() {
-  return editorExperiment('advanced_layouts', true) ?
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  css(columnLayoutResponsiveSharedStyle, {
+  })
+});
+
+/**
+ * Responsive styles for layout columns when advanced layouts experiment is on
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutColumnResponsiveStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror [data-layout-section]': {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.layout-section-container [data-layout-section]': {
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.layout-section-container': {
+    containerType: 'inline-size',
+    containerName: 'layout-area'
+  }
+});
+
+/**
+ * Layout section styles when advanced layouts experiment is on
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutSectionStylesAdvanced = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror .layout-section-container [data-layout-section]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '> .ProseMirror-widget': {
+      flex: 'none',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      display: 'contents !important',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> .ProseMirror-widget': {
-        flex: 'none',
+      '&[data-blocks-drag-handle-container] div': {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-        display: 'contents !important',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '&[data-blocks-drag-handle-container] div': {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-          display: 'contents !important'
-        },
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '&[data-blocks-drop-target-container]': {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-          display: 'block !important',
-          margin: "var(--ds-space-negative-050, -4px)",
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-          '[data-drop-target-for-element]': {
-            position: 'absolute'
-          }
-        },
+        display: 'contents !important'
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&[data-blocks-drop-target-container]': {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+        display: 'block !important',
+        margin: "var(--ds-space-negative-050, -4px)",
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '& + [data-layout-column]': {
-          margin: 0
+        '[data-drop-target-for-element]': {
+          position: 'absolute'
         }
       },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '> [data-layout-column]': {
+      '& + [data-layout-column]': {
         margin: 0
       }
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '> [data-layout-column]': {
+      margin: 0
     }
-  }) : columnLayoutSharedStyle;
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutBorderBaseStyles = css(_defineProperty({
-  // TODO: DSP-4441 - Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
-  //       This is because the default state already uses the same token and, as such, the hover style won't change anything.
-  //       https://product-fabric.atlassian.net/browse/DSP-4441
-  // Shows the border when cursor is inside a layout
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.selected [data-layout-column], &:hover [data-layout-column]': {
-    border: "1px solid ".concat("var(--ds-border, #091E4224)")
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.selected.danger [data-layout-column]': {
-    backgroundColor: "var(--ds-background-danger, #FFECEB)",
-    borderColor: "var(--ds-border-danger, #E2483D)"
-  }
-}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  '[data-layout-column]': [
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-  borderSelectionStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-  blanketSelectionStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-  hideNativeBrowserTextSelectionStyles, {
-    '::after': {
-      backgroundColor: 'transparent'
-    }
-  }]
-}));
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutBorderViewStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.selected [data-layout-column], &:hover [data-layout-column]': {
-    border: 0
   }
 });
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var columnSeparatorBaseStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout-content]::before': {
-    content: "''",
-    borderLeft: "1px solid ".concat("var(--ds-border, #091E4224)"),
-    position: 'absolute',
-    height: 'calc(100% - 24px)',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginLeft: -25
-  }
+/**
+ * Layout section styles when advanced layouts experiment is off
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutSectionStylesNotAdvanced = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.ProseMirror [data-layout-section]': _defineProperty({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
+    flexDirection: 'column'
+  })
 });
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var columnSeparatorViewStyles = css({
+/**
+ * Selected styles for layout when advanced layouts experiment is off
+ */
+// TODO: DSP-4441 - Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
+//       This is because the default state already uses the same token and, as such, the hover style won't change anything.
+//       https://product-fabric.atlassian.net/browse/DSP-4441
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutSelectedStylesNotAdvanced = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout-content]::before': {
-    borderLeft: 0
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-section], .layoutSectionView-content-wrap': _defineProperty({
+      // Shows the border when cursor is inside a layout
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&.selected [data-layout-column], &:hover [data-layout-column]': {
+        border: "1px solid ".concat("var(--ds-border, #091E4224)")
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '&.selected.danger [data-layout-column]': {
+        backgroundColor: "var(--ds-background-danger, #FFECEB)",
+        borderColor: "var(--ds-border-danger, #E2483D)"
+      }
+    }, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      '[data-layout-column]': [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      borderSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      blanketSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles, {
+        '::after': {
+          backgroundColor: 'transparent'
+        }
+      }]
+    })
   }
 });
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+// TODO: ED-28075 - inline rowSeparatorBaseStyles to unblock Compiled CSS migration
 var rowSeparatorBaseStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '[data-layout-content]::before': {
@@ -234,240 +214,271 @@ var rowSeparatorBaseStyles = css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var rowSeparatorViewStyles = css({
+/**
+ * Selected styles for layout when advanced layouts experiment is on
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutSelectedStylesAdvanced = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '[data-layout-content]::before': {
-    borderTop: 0
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-section], .layoutSectionView-content-wrap': _defineProperty(_defineProperty(_defineProperty({}, layoutSelectedSelector, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '[data-layout-column]:not(:first-of-type) [data-layout-content]::before': {
+        content: "''",
+        borderLeft: "1px solid ".concat("var(--ds-border, #091E4224)"),
+        position: 'absolute',
+        height: 'calc(100% - 24px)',
+        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+        marginLeft: -25
+      }
+    }), '&.selected.danger [data-layout-section]', {
+      backgroundColor: "var(--ds-background-danger, #FFECEB)",
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
+      borderRadius: 4
+    }), "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
+      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
+      borderRadius: 4,
+      backgroundColor: "var(--ds-background-selected, #E9F2FF)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      '[data-layout-column]': [
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      blanketSelectionStyles,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+      hideNativeBrowserTextSelectionStyles, {
+        border: 0,
+        '::before': {
+          backgroundColor: 'transparent'
+        }
+      }]
+    })
   }
 });
 
+/**
+ * Base responsive styles for layout
+ */
 // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-var layoutWithSeparatorBorderResponsiveBaseStyles = function layoutWithSeparatorBorderResponsiveBaseStyles(breakpoint
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-) {
-  return css(_defineProperty({}, "&.selected, &:hover, &.selected.danger, &.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:".concat(breakpoint, "px)"), rowSeparatorBaseStyles)
-  }));
-};
-
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-var layoutWithSeparatorBorderResponsiveViewStyles = function layoutWithSeparatorBorderResponsiveViewStyles(breakpoint
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-) {
-  return css(_defineProperty({}, "&.selected, &:hover, &.selected.danger, &.".concat(akEditorSelectedNodeClassName, ":not(.danger)"), {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-    '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:".concat(breakpoint, "px)"), rowSeparatorViewStyles)
-  }));
-};
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutWithSeparatorBorderBaseStyles = css(_defineProperty({
-  "&.selected [data-layout-column]:not(:first-of-type), [data-empty-layout='true'] [data-layout-column]:not(:first-of-type), &:hover [data-layout-column]:not(:first-of-type)":
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  columnSeparatorBaseStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutResponsiveBaseStyles = css(_defineProperty(_defineProperty(_defineProperty({}, selectorForNotResizedLayoutInFulllWidthEditor, _defineProperty({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.selected.danger [data-layout-section]': {
-    backgroundColor: "var(--ds-background-danger, #FFECEB)",
-    boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
-    borderRadius: 4,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '[data-layout-column]:not(:first-of-type)': columnSeparatorBaseStyles
+  '[data-layout-section]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
+    '@container editor-area (max-width:724px)': {
+      flexDirection: 'column'
+    }
   }
-}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
-  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
-  borderRadius: 4,
-  backgroundColor: "var(--ds-background-selected, #E9F2FF)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  '[data-layout-column]': [
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-  blanketSelectionStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-  hideNativeBrowserTextSelectionStyles, {
-    border: 0,
-    '::before': {
-      backgroundColor: 'transparent'
+}, layoutResponsiveSelectedSelector, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:724px)", rowSeparatorBaseStyles)
+})), selectorForNotResizedLayoutInFixedWidthEditor, _defineProperty({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout-section]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
+    '@container editor-area (max-width:788px)': {
+      flexDirection: 'column'
     }
-  }],
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  '[data-layout-column]:not(:first-of-type)': columnSeparatorBaseStyles
-}));
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutWithSeparatorBorderViewStyles = css(_defineProperty({
-  "&.selected [data-layout-column]:not(:first-of-type), [data-empty-layout='true'] [data-layout-column]:not(:first-of-type), &:hover [data-layout-column]:not(:first-of-type)":
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  columnSeparatorViewStyles,
+  }
+}, layoutResponsiveSelectedSelector, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:788px)", rowSeparatorBaseStyles)
+})), selectorForResizedLayoutInFullOrFixedWidthEditor, _defineProperty({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '&.selected.danger [data-layout-section]': {
-    boxShadow: "0 0 0 0 ".concat("var(--ds-border-danger, #E2483D)"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '[data-layout-column]:not(:first-of-type)': columnSeparatorViewStyles
+  '[data-layout-section]': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
+    '@container editor-area (max-width:820px)': {
+      flexDirection: 'column'
+    }
   }
-}, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
-  boxShadow: "0 0 0 0 ".concat("var(--ds-border-selected, #0C66E4)"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-  '[data-layout-column]:not(:first-of-type)': columnSeparatorViewStyles
-}));
+}, layoutResponsiveSelectedSelector, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:820px)", rowSeparatorBaseStyles)
+})));
 
-// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutResponsiveBaseStyles = css({
-  // chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
-  // not resized layout in full-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.fabric-editor--full-width-mode .ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '> .layoutSectionView-content-wrap': [{
-      '[data-layout-section]': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
-        '@container editor-area (max-width:724px)': {
-          flexDirection: 'column'
-        }
-      }
-    }, layoutWithSeparatorBorderResponsiveBaseStyles(724)]
-  },
-  // not resized layout in fixed-width editor
+/**
+ * Responsive styles for layout in view mode
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutResponsiveStylesForView = css(_defineProperty(_defineProperty(_defineProperty({}, selectorForNotResizedLayoutInFulllWidthEditor, _defineProperty({}, layoutResponsiveSelectedSelector, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:724px)", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-content]::before': {
+      borderTop: 0
+    }
+  })
+})), selectorForNotResizedLayoutInFixedWidthEditor, _defineProperty({}, layoutResponsiveSelectedSelector, {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '> .layoutSectionView-content-wrap': [{
-      '[data-layout-section]': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
-        '@container editor-area (max-width:788px)': {
-          flexDirection: 'column'
+  '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:788px)", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-content]::before': {
+      borderTop: 0
+    }
+  })
+})), selectorForResizedLayoutInFullOrFixedWidthEditor, _defineProperty({}, layoutResponsiveSelectedSelector, {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+  '[data-layout-column]:not(:first-of-type)': _defineProperty({}, "@container editor-area (max-width:820px)", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-content]::before': {
+      borderTop: 0
+    }
+  })
+})));
+
+/**
+ * Base styles for layout
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
+export var layoutBaseStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-section]': {
+      margin: "var(--ds-space-100, 8px)".concat(" -12px 0"),
+      transition: 'border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
+      cursor: 'pointer',
+      // Inner cursor located 26px from left
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '[data-layout-column]': {
+        flex: 1,
+        position: 'relative',
+        minWidth: 0,
+        /* disable 4 borders when in view mode and advanced layouts is on */
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        border: "1px solid ".concat("var(--ds-border, #091E4224)"),
+        borderRadius: 4,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+        padding: "var(--ds-space-150, 12px)",
+        boxSizing: 'border-box',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '> div': {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+          '> .embedCardView-content-wrap:first-of-type .rich-media-item': {
+            marginTop: 0
+          },
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+          '> .mediaSingleView-content-wrap:first-of-type .rich-media-item': {
+            marginTop: 0
+          },
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+          '> .ProseMirror-gapcursor.-right:first-child + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor.-right + .mediaSingleView-content-wrap .rich-media-item, > .ProseMirror-gapcursor.-right:first-of-type + .embedCardView-content-wrap .rich-media-item': {
+            marginTop: 0
+          },
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+          '> .ProseMirror-gapcursor:first-child + span + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor + span + .mediaSingleView-content-wrap .rich-media-item': {
+            marginTop: 0
+          },
+          // Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down and shrinking layout's node selectable area (leniency margin)
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+          "> [data-node-type='decisionList']": {
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+            'li:first-of-type [data-decision-wrapper]': {
+              marginTop: 0
+            }
+          }
+        },
+        // Make the 'content' fill the entire height of the layout column to allow click handler of layout section nodeview to target only data-layout-column
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+        '[data-layout-content]': {
+          height: '100%',
+          cursor: 'text',
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+          '.mediaGroupView-content-wrap': {
+            clear: 'both'
+          }
         }
       }
-    }, layoutWithSeparatorBorderResponsiveBaseStyles(788)]
+    }
   },
-  // resized layout in full/fixed-width editor
+  // hide separator when element is dragging on top of a layout column
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror .fabric-editor-breakout-mark': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '.layoutSectionView-content-wrap': [{
-      '[data-layout-section]': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
-        '@container editor-area (max-width:820px)': {
-          flexDirection: 'column'
-        }
+  '[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before': {
+    display: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.fabric-editor--full-width-mode .ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-section]': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+      '.pm-table-container': {
+        margin: '0 2px'
       }
-    }, layoutWithSeparatorBorderResponsiveBaseStyles(820)]
+    }
   }
 });
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
-var layoutResponsiveViewStyles = css({
-  // chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer
-  // not resized layout in full-width editor
+/**
+ * Base styles overrides for layout columns when advanced layouts experiment is on
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutBaseStylesAdvanced = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.fabric-editor--full-width-mode .ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '> .layoutSectionView-content-wrap': layoutWithSeparatorBorderResponsiveViewStyles(724)
-  },
-  // not resized layout in fixed-width editor
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
-  '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '> .layoutSectionView-content-wrap': layoutWithSeparatorBorderResponsiveViewStyles(788)
+  '.ProseMirror [data-layout-section] [data-layout-column]': {
+    border: 0
+  }
+});
+
+/**
+ * Spacing overrides when platform_editor_nested_dnd_styles_changes is on
+ */
+// TODO: EDF-123 - Migrate away from gridSize
+// Recommendation: Replace directly with 7px
+// Ignored via go/ees007
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutBaseStylesFixesUnderNestedDnDFG = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror [data-layout-section]': {
+    margin: "var(--ds-space-100, 8px)".concat(" -20px 0")
   },
-  // resized layout in full/fixed-width editor
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-  '.ProseMirror .fabric-editor-breakout-mark': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '.layoutSectionView-content-wrap': layoutWithSeparatorBorderResponsiveViewStyles(820)
+  '.ProseMirror [data-layout-section] [data-layout-column]': {
+    padding: '12px 20px'
   }
 });
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-export var layoutBaseStyles = function layoutBaseStyles() {
-  return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
-    '.ProseMirror': [layoutSectionStyles(), {
-      '[data-layout-section]': [{
-        // TODO: EDF-123 - Migrate away from gridSize
-        //       Recommendation: Replace directly with 7px
-        //       Ignored via go/ees007
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-        margin: "var(--ds-space-100, 8px)".concat(" -", 12 + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), "px 0"),
-        transition: 'border-color 0.3s cubic-bezier(0.15, 1, 0.3, 1)',
-        cursor: 'pointer',
-        // Inner cursor located 26px from left
-        '[data-layout-column]': {
-          flex: 1,
-          position: 'relative',
-          minWidth: 0,
-          /* disable 4 borders when in view mode and advanced layouts is on */
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-          border: "".concat(editorExperiment('advanced_layouts', true) ? 0 : 1, "px solid ", "var(--ds-border, #091E4224)"),
-          borderRadius: 4,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-          padding: "12px ".concat(12 + (fg('platform_editor_nested_dnd_styles_changes') ? 8 : 0), "px"),
-          boxSizing: 'border-box',
-          '> div': [firstNodeWithNotMarginTop(), {
-            '> .embedCardView-content-wrap:first-of-type .rich-media-item': {
-              marginTop: 0
-            },
-            '> .mediaSingleView-content-wrap:first-of-type .rich-media-item': {
-              marginTop: 0
-            },
-            '> .ProseMirror-gapcursor.-right:first-child + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor.-right + .mediaSingleView-content-wrap .rich-media-item, > .ProseMirror-gapcursor.-right:first-of-type + .embedCardView-content-wrap .rich-media-item': {
-              marginTop: 0
-            },
-            '> .ProseMirror-gapcursor:first-child + span + .mediaSingleView-content-wrap .rich-media-item, > style:first-child + .ProseMirror-gapcursor + span + .mediaSingleView-content-wrap .rich-media-item': {
-              marginTop: 0
-            },
-            // Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down and shrinking layout's node selectable area (leniency margin)
-            "> [data-node-type='decisionList']": {
-              'li:first-of-type [data-decision-wrapper]': {
-                marginTop: 0
-              }
-            }
-          }],
-          // Make the 'content' fill the entire height of the layout column to allow click handler of layout section nodeview to target only data-layout-column
-          '[data-layout-content]': {
-            height: '100%',
-            cursor: 'text',
-            '.mediaGroupView-content-wrap': {
-              clear: 'both'
-            }
-          }
-        }
-      }, layoutColumnStyles()],
-      // styles to support borders for layout
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-      '[data-layout-section], .layoutSectionView-content-wrap': editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderBaseStyles : layoutBorderBaseStyles
-    }],
-    // hide separator when element is dragging on top of a layout column
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before': {
-      display: 'none'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '.fabric-editor--full-width-mode .ProseMirror': {
+/**
+ * Layout in view mode styles for selected state when advanced layouts experiment is on.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
+export var layoutSelectedStylesForViewAdvanced = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-section], .layoutSectionView-content-wrap': _defineProperty(_defineProperty(_defineProperty({}, layoutSelectedSelector, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+      '[data-layout-column]:not(:first-of-type) [data-layout-content]::before': {
+        borderLeft: 0
+      }
+    }), '&.selected.danger [data-layout-section]', {
+      boxShadow: "0 0 0 0 ".concat("var(--ds-border-danger, #E2483D)")
+    }), "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
+      boxShadow: "0 0 0 0 ".concat("var(--ds-border-selected, #0C66E4)")
+    })
+  }
+});
+
+/**
+ * Layout in view mode styles for selected state when advanced layouts experiment is off.
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutSelectedStylesForViewNotAdvanced = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors
+    '[data-layout-section], .layoutSectionView-content-wrap': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-      '[data-layout-section]': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-        '.pm-table-container': {
-          margin: '0 2px'
-        }
+      '&.selected [data-layout-column], &:hover [data-layout-column]': {
+        border: 0
       }
     }
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  editorExperiment('advanced_layouts', true) && layoutResponsiveBaseStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-  editorExperiment('advanced_layouts', false) &&
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-  fg('platform_editor_nested_dnd_styles_changes') && {
-    '.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section]': {
-      margin: "var(--ds-space-100, 8px)".concat(" -20px 0")
-    }
-  });
-};
+  }
+});
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
-export var layoutViewStyles = css({
+/*
+ * Layout in view mode styles, overrides over layout base styles
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
+export var layoutStylesForView = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
@@ -477,10 +488,42 @@ export var layoutViewStyles = css({
       '[data-layout-column]': {
         border: 0
       }
+    }
+  }
+});
+
+/*
+ * marginTop fixes when platform_editor_nested_dnd_styles_changes is on
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutColumnMartinTopFixesNew = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror [data-layout-section] [data-layout-column] > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span))': {
+      marginTop: 0
+    }
+  }
+});
+
+/*
+ * marginTop fixes when platform_editor_nested_dnd_styles_changes is off
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var layoutColumnMartinTopFixesOld = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '.ProseMirror [data-layout-section] [data-layout-column] > div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> :not(style):first-child, > style:first-child + *': {
+      marginTop: 0
     },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-    '[data-layout-section], .layoutSectionView-content-wrap': editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderViewStyles : layoutBorderViewStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-gapcursor:first-child + *, > style:first-child + .ProseMirror-gapcursor + *': {
+      marginTop: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-gapcursor:first-child + span + *': {
+      marginTop: 0
+    }
   }
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
-editorExperiment('advanced_layouts', true) && layoutResponsiveViewStyles);
+});