import { css } from '@emotion/react';
import { N500 } from '@atlaskit/theme/colors';
import { wrapperDefault } from '../styles';
export const wrapperStyle = css(wrapperDefault, {
  cursor: 'pointer',
  display: 'inline-flex',
  margin: `1px 1px ${"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 ${`var(--ds-border-input, ${N500})`}`
  }
});
export const inlineWrapperStyles = css({
  maxWidth: '100%',
  'tr &': {
    maxWidth: 'inherit'
  },
  '.rich-media-item': {
    maxWidth: '100%'
  }
});