/* eslint-disable @atlaskit/design-system/no-exported-css */
import { css } from '@emotion/react';
import { N20, N20A, N70 } from '@atlaskit/theme/colors';
import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
export var wrapperDefault = css({
  background: "var(--ds-background-neutral, ".concat(N20, ")"),
  borderRadius: "var(--ds-border-radius, 3px)",
  position: 'relative',
  verticalAlign: 'middle',
  '&.with-overlay': {
    '.extension-overlay': {
      background: "var(--ds-background-neutral-hovered, ".concat(N20A, ")"),
      color: 'transparent'
    },
    '&:hover .extension-overlay': {
      opacity: 1
    }
  }
});
export var overlay = css({
  borderRadius: "var(--ds-border-radius, 3px)",
  position: 'absolute',
  width: '100%',
  height: '100%',
  opacity: 0,
  pointerEvents: 'none',
  transition: 'opacity 0.3s'
});
export var placeholderFallback = css({
  display: 'inline-flex',
  alignItems: 'center',
  '& > img': {
    margin: "0 ".concat("var(--ds-space-050, 4px)")
  },
  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
  /* stylelint-disable-next-line */
  label: 'placeholder-fallback'
});
export var placeholderFallbackParams = css({
  display: 'inline-block',
  maxWidth: '200px',
  marginLeft: "var(--ds-space-050, 4px)",
  color: "var(--ds-text-subtlest, ".concat(N70, ")"),
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  overflow: 'hidden'
});
export var styledImage = css({
  maxHeight: '16px',
  maxWidth: '16px',
  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
  /* stylelint-disable-next-line */
  label: 'lozenge-image'
});