@atlaskit/editor-common/dist/cjs/extensibility/MultiBodiedExtension/styles.js

A package that contains common classes and components for editor and renderer

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.overlayStyles = exports.mbeExtensionWrapperCSSStyles = void 0;
var _react = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");
var _styles = require("../Extension/styles");
// Wrapper the extension title and extensionContainer
var mbeExtensionWrapperCSSStyles = exports.mbeExtensionWrapperCSSStyles = (0, _react.css)(_styles.wrapperDefault, {
  '&.with-margin-styles': {
    marginTop: 0,
    marginLeft: "var(--ds-space-negative-150, -12px)",
    marginRight: "var(--ds-space-negative-150, -12px)"
  },
  cursor: 'pointer',
  marginTop: "var(--ds-space-250, 24px)",
  marginBottom: "var(--ds-space-200, 16px)",
  '.extension-title': {
    display: 'flex',
    alignItems: 'center',
    lineHeight: '16px !important',
    marginBottom: "var(--ds-space-100, 8px)",
    marginLeft: "var(--ds-space-050, 4px)".concat(" !important"),
    marginRight: "var(--ds-space-100, 8px)",
    paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
  },
  '&.with-border': {
    border: "1px solid ".concat("var(--ds-border-inverse, ".concat(_colors.N0, ")")) // adding this so macro doesn't jump when hover border is shown
  },
  '&.with-hover-border': {
    border: "1px solid ".concat("var(--ds-border-bold, ".concat(_colors.N100, ")")),
    opacity: '86%'
  }
});
var overlayStyles = exports.overlayStyles = (0, _react.css)({
  borderRadius: "var(--ds-border-radius, 3px)",
  position: 'absolute',
  width: '100%',
  height: '100%',
  opacity: 0,
  pointerEvents: 'none',
  transition: 'opacity 0.3s',
  zIndex: 1
});