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

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

import { css } from '@emotion/react';
import { N0, N100 } from '@atlaskit/theme/colors';
import { wrapperDefault } from '../Extension/styles';

// Wrapper the extension title and extensionContainer
export var mbeExtensionWrapperCSSStyles = css(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(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(N100, ")")),
    opacity: '86%'
  }
});
export var overlayStyles = css({
  borderRadius: "var(--ds-border-radius, 3px)",
  position: 'absolute',
  width: '100%',
  height: '100%',
  opacity: 0,
  pointerEvents: 'none',
  transition: 'opacity 0.3s',
  zIndex: 1
});