import { css } from '@emotion/react';
import { N30, N500 } from '@atlaskit/theme/colors';
import { wrapperDefault } from '../styles';
export var widerLayoutClassName = 'wider-layout';
export var wrapperStyle = css(wrapperDefault, {
  '&.without-frame': {
    background: 'transparent'
  },
  cursor: 'pointer',
  width: '100%',
  '.extension-overflow-wrapper:not(.with-body)': {
    overflowX: 'auto'
  },
  '&.with-border': {
    border: "1px solid transparent" // adding this so macro doesn't jump when hover border is shown
  },
  '&.with-bodied-border': {
    border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
  },
  '&.with-hover-border': {
    border: "1px solid ".concat("var(--ds-border-input, ".concat(N500, ")"))
  },
  '&.with-margin-styles': {
    margin: "0 ".concat("var(--ds-space-negative-150, -12px)"),
    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
    padding: '0 10px' // need exact number here to match editor elements' width
  }
});
export var header = css({
  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " 0px"),
  verticalAlign: 'middle',
  '&.with-children:not(.without-frame)': {
    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)")
  },
  '&.without-frame': {
    padding: 0
  }
});
export var content = css({
  padding: "var(--ds-space-100, 8px)",
  background: "var(--ds-surface, white)",
  border: "1px solid ".concat("var(--ds-border, ".concat(N30, ")")),
  borderRadius: "var(--ds-border-radius, 3px)",
  cursor: 'initial',
  width: '100%',
  '&.remove-border': {
    border: 'none'
  }
});
export var contentWrapper = css({
  padding: "0 ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)"),
  display: 'flex',
  justifyContent: 'center',
  '&.with-padding-styles': {
    padding: "var(--ds-space-100, 8px)"
  }
});
export var overflowWrapperStyles = css({
  '&.with-margin-styles': {
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
    margin: "0 -10px" // need exact number here to match editor elements' width
  }
});