"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.wrapperStyle = exports.inlineWrapperStyles = void 0;
var _react = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");
var _styles = require("../styles");
var wrapperStyle = exports.wrapperStyle = (0, _react.css)(_styles.wrapperDefault, {
  cursor: 'pointer',
  display: 'inline-flex',
  margin: "1px 1px ".concat("var(--ds-space-050, 4px)"),
  '> img': {
    borderRadius: "var(--ds-border-radius, 3px)"
  },
  '&::after, &::before': {
    verticalAlign: 'text-top',
    display: 'inline-block',
    width: '1px',
    content: "''"
  },
  '&.with-children': {
    padding: 0,
    background: "var(--ds-background-neutral-subtle, white)"
  },
  '&.with-border': {
    border: "1px solid transparent" // adding this so macro doesn't jump when hover border is shown
  },
  '&.with-hover-border': {
    border: "1px solid ".concat("var(--ds-border-input, ".concat(_colors.N500, ")"))
  }
});
var inlineWrapperStyles = exports.inlineWrapperStyles = (0, _react.css)({
  maxWidth: '100%',
  'tr &': {
    maxWidth: 'inherit'
  },
  '.rich-media-item': {
    maxWidth: '100%'
  }
});