@atlaskit/editor-plugin-media/dist/es2019/nodeviews/styles.js

Media plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
export const MediaSingleNodeSelector = 'media-single-node';
const absoluteDivStyles = css({
  position: 'absolute',
  width: '100%',
  height: '100%'
});
const forcedDimensionsStyles = css({
  width: '100%',
  position: 'relative'
});
const pointerCursorStyle = css({
  cursor: 'pointer'
});
export const MediaCardWrapper = ({
  dimensions,
  children,
  selected,
  borderWidth = 0,
  onContextMenu
}) => {
  const calculatedBorderWidth = selected && borderWidth > 0 ? borderWidth + 1 : borderWidth;
  const borderRadius = `${calculatedBorderWidth + 8}px`;
  return jsx("div", {
    "data-testid": "media-card-wrapper"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: "media-card-wrapper",
    css: pointerCursorStyle,
    style: {
      borderColor: `var(--custom-palette-color)`,
      borderWidth: `${calculatedBorderWidth}px`,
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      borderStyle: 'solid',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      borderRadius
    }
  }, jsx("div", {
    css: forcedDimensionsStyles,
    style: {
      paddingBottom: `${dimensions.height / dimensions.width * 100}%`
    },
    onContextMenuCapture: onContextMenu
  }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
    borderColor: `var(--custom-palette-color)`
  }), jsx("div", {
    css: absoluteDivStyles
  }, children)));
};