"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.gridStyles = exports.GRID_GUTTER = void 0;
var _react = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _colors = require("@atlaskit/theme/colors");
var GRID_GUTTER = exports.GRID_GUTTER = 12;
var gridStyles = exports.gridStyles = (0, _react.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: _editorSharedStyles.akEditorGridLineZIndex
  },
  '.gridContainer': {
    position: 'fixed',
    height: '100vh',
    width: '100%',
    pointerEvents: 'none'
  },
  '.gridLine': {
    borderLeft: "1px solid ".concat("var(--ds-border, ".concat(_colors.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(_colors.B200, ")"))
  }
});