import { css } from '@emotion/react';
import { akEditorGridLineZIndex } from '@atlaskit/editor-shared-styles';
import { B200, N30A } from '@atlaskit/theme/colors';
export var GRID_GUTTER = 12;
export var gridStyles = css({
  '.gridParent': {
    width: "calc(100% + ".concat(GRID_GUTTER * 2, "px)"),
    marginLeft: "var(--ds-space-negative-150, -12px)",
    marginRight: "var(--ds-space-negative-150, -12px)",
    transform: 'scale(1)',
    zIndex: akEditorGridLineZIndex
  },
  '.gridContainer': {
    position: 'fixed',
    height: '100vh',
    width: '100%',
    pointerEvents: 'none'
  },
  '.gridLine': {
    borderLeft: "1px solid ".concat("var(--ds-border, ".concat(N30A, ")")),
    display: 'inline-block',
    boxSizing: 'border-box',
    height: '100%',
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
    marginLeft: '-1px',
    transition: 'border-color 0.15s linear',
    zIndex: 0
  },
  '.highlight': {
    borderLeft: "1px solid ".concat("var(--ds-border-focused, ".concat(B200, ")"))
  }
});