@atlaskit/editor-core/dist/esm/ui/EditorContentContainer/styles/layout.js

A package contains Atlassian editor core functionality

import _defineProperty from "@babel/runtime/helpers/defineProperty";
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */

import { css } from '@emotion/react';
import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
var gridMediumMaxWidth = 1024;
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';

// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
var layoutColumnDividerClassName = 'layout-column-divider';
var layoutColumnDividerRailClassName = 'layout-column-divider-rail';
var layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';

/**
 * Styles for the column resize divider widget DOM elements.
 * Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
 * Applied only when advanced_layouts experiment is on.
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var layoutColumnDividerStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(layoutColumnDividerClassName), _defineProperty(_defineProperty({
  // Negative margin removes the applied 'gap' from the parent's flex box
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
  marginInline: '-15px 0px',
  flexShrink: 0,
  boxSizing: 'content-box',
  cursor: 'col-resize',
  position: 'relative',
  zIndex: 2,
  alignSelf: 'stretch',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
}, "&:hover .".concat(layoutColumnDividerRailClassName), {
  background: "var(--ds-background-selected, #E9F2FE)"
}), "&:hover .".concat(layoutColumnDividerThumbClassName), {
  background: "var(--ds-border-focused, #4688EC)"
})), ".".concat(layoutColumnDividerRailClassName), {
  width: 7,
  height: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: "var(--ds-radius-small, 4px)",
  transition: 'background-color 0.2s',
  pointerEvents: 'none'
}), ".".concat(layoutColumnDividerThumbClassName), {
  minWidth: 3,
  height: 'clamp(27px, calc(100% - 32px), 96px)',
  background: "var(--ds-border, #0B120E24)",
  borderRadius: "var(--ds-radius-medium, 6px)",
  pointerEvents: 'none',
  position: 'sticky',
  top: "var(--ds-space-150, 12px)",
  bottom: "var(--ds-space-150, 12px)"
}));
/**
 * Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
 * since the layout section/column spacing changes.
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var layoutColumnDividerStylesNestedDnD = css(_defineProperty({}, ".".concat(layoutColumnDividerClassName), {
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
  marginInline: '0 -7px'
}));
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
  '.ProseMirror [data-layout-section]': _defineProperty(_defineProperty({
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '> [data-layout-column]': {
      margin: '0 4px'
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
    '> [data-layout-column]:first-of-type': {
      marginLeft: 0
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
    '> [data-layout-column]:last-of-type': {
      marginRight: 0
    }
  }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-layout-column] + [data-layout-column]': {
      margin: 0
    }
  }), "> [data-layout-column].".concat(akEditorSelectedNodeClassName, ":not(.danger)"), [
  // 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, {
    // layout column selection shorter after layout border has been removed
    '::before': {
      width: 'calc(100% - 8px)',
      left: 4,
      borderRadius: "var(--ds-radius-small, 3px)"
    }
  }])
});

/**
 * Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var layoutColumnResizeStyles = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror [data-layout-section]': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '> [data-layout-column][style*="--column-width"]': {
      // Support CSS custom property for smooth resizing during drag
      // When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
      // Using attribute selector for higher specificity than inline styles
      flexBasis: 'var(--column-resize-width, var(--column-width))',
      // Also ensure flex-grow and flex-shrink are reset when using custom width
      flex: 'var(--column-resize-flex, 1)'
    }
  }
});

/**
 * 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
      marginLeft: 8
    }
  }, "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-layout-column] + [data-layout-column]': {
      marginLeft: 0
    }
  })
});

/**
 * 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
    '& > .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(_defineProperty({
  // 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': _defineProperty(_defineProperty({
      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
      '&[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'
        }
      }
    }, "&.".concat(layoutColumnDividerClassName), {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
      display: 'block !important',
      flex: 'none',
      opacity: 0,
      transition: 'opacity 0.2s'
    }), '& + [data-layout-column]', {
      margin: 0
    }),
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '> [data-layout-column]': {
      margin: 0
    }
  }
}, ".ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]", _defineProperty(_defineProperty({}, "> .ProseMirror-widget.".concat(layoutColumnDividerClassName), {
  opacity: 1
}), "> .ProseMirror-widget.".concat(layoutColumnDividerClassName, " ~ [data-layout-column] [data-layout-content]::before"), {
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
  display: 'none !important'
})));

/**
 * 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(_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'
    }
  }, "& > .".concat(layoutColumnDividerClassName), {
    flex: 'none'
  }), "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
    flexDirection: 'column'
  })
});

/**
 * 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
  '.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, #0B120E24)")
      },
      // 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'
        }
      }]
    })
  }
});

// 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': {
    content: "''",
    borderTop: "1px solid ".concat("var(--ds-border, #0B120E24)"),
    position: 'absolute',
    width: 'calc(100% - 32px)',
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
    marginTop: -13,
    // clear styles for column separator
    borderLeft: 'unset',
    marginLeft: 'unset',
    height: 'unset'
  }
});

/**
 * 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
  '.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, #0B120E24)"),
        position: 'absolute',
        height: 'calc(100% - 24px)',
        // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
        marginLeft: -25
      },
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
      '[data-layout-column]:is([data-valign="middle"], [data-valign="bottom"]):not(:first-of-type) [data-layout-content]::before': {
        top: "var(--ds-space-150, 12px)"
      }
    }), '&.selected.danger [data-layout-section]', {
      backgroundColor: "var(--ds-background-danger, #FFECEB)",
      boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
      borderRadius: "var(--ds-radius-small, 4px)"
    }), "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
      boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)"),
      borderRadius: "var(--ds-radius-small, 4px)",
      backgroundColor: "var(--ds-background-selected, #E9F2FE)",
      // 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'
        }
      }]
    })
  }
});

// Fix for layoutSelectedStylesAdvanced that addresses an issue where the delete indicator
// sometimes doesn't appear when inside a synced block.
// Separated as a distinct style to allow feature-gating without affecting module-level styles.
// This prevents style inconsistencies before the feature flag is initialized.
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var layoutSelectedStylesAdvancedFix = css({
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
    '[data-layout-section], .layoutSectionView-content-wrap': _defineProperty({
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
      '&.selected.danger [data-layout-section]': {
        boxShadow: "inset 0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
      }
    }, "&.".concat(akEditorSelectedNodeClassName, ":not(.danger) [data-layout-section]"), {
      boxShadow: "inset 0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)")
    })
  }
});

/**
 * Base responsive styles for layout
 */
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
// 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
  '[data-layout-section]': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
    '@container editor-area (max-width:724px)': {
      flexDirection: 'column'
    }
  }
}, 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'
    }
  }
}, 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
  '[data-layout-section]': {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
    '@container editor-area (max-width:820px)': {
      flexDirection: 'column'
    }
  }
}, 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)
})));

/**
 * 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
  '[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: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
        borderRadius: "var(--ds-radius-small, 4px)",
        // 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'
          }
        },
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
        '&[data-valign="middle"], &[data-valign="bottom"]': {
          display: 'flex',
          flexDirection: 'column'
        },
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
        '&[data-valign="middle"]': {
          justifyContent: 'center'
        },
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
        '&[data-valign="bottom"]': {
          justifyContent: 'flex-end'
        },
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
        '&[data-valign="middle"] > [data-layout-content], &[data-valign="bottom"] > [data-layout-content]': {
          height: 'auto'
        }
      }
    }
  },
  // 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': {
    // 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'
      }
    }
  }
});
// on exp 'platform_editor_table_excerpts_fix' cleanup, merge this style to the one above
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Needs manual remediation
export var layoutBaseStylesWithTableExcerptsFix = 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]': {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
      '[data-layout-column]': {
        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
        '> div': {
          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
          '.pm-table-container': {
            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
            width: '100% !important'
          }
        }
      }
    }
  }
});

/**
 * 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
  '.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")
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror [data-layout-section] [data-layout-column]': {
    padding: '12px 20px'
  }
});

/**
 * Spacing overrides when platform_editor_nested_dnd_styles_changes is on,
 * excluding layouts inside bodied sync blocks
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = css({
  // Apply -20px margin to all sections
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror [data-layout-section]': {
    margin: "var(--ds-space-100, 8px)".concat(" -20px 0")
  },
  // Reset to default margin when inside bodied sync block
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror [data-prosemirror-node-name="bodiedSyncBlock"] [data-layout-section]': {
    margin: "var(--ds-space-100, 8px)".concat(" -12px 0")
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
  '.ProseMirror [data-layout-section] [data-layout-column]': {
    padding: '12px 20px'
  }
});

/**
 * 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, #1868DB)")
    })
  }
});

/**
 * 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
      '&.selected [data-layout-column], &:hover [data-layout-column]': {
        border: 0
      }
    }
  }
});

/*
 * 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
    '[data-layout-section]': {
      cursor: 'default',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
      '[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-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
    }
  }
});