getPopperArrowStyle = ({
  arrowSize = '1rem',
  arrowShadowColor = 'rgba(0, 0, 0, 0.1)',
  hasArrow = true,
  bg = 'inherit'
}) => {
  const popoverMargin = hasArrow ? `calc(${arrowSize} / 2)` : null
  const arrowPos = `calc(${arrowSize} / 2 * -1)`

  return css({
    display: 'none',

    '[data-show]': {
      display: 'block'
    },

    '[data-popper-arrow]': {
      position: 'absolute',
      zIndex: -1,

      '&::before': {
        content: '""',
        transform: 'rotate(45deg)',
        backgroundColor: bg,
        display: 'block',
        width: arrowSize,
        height: arrowSize
      }
    },

    '&[data-popper-placement^="top"]': {
      marginBottom: popoverMargin,
      transformOrigin: 'bottom center'
    },

    '&[data-popper-placement^="top"] [data-popper-arrow]': {
      bottom: arrowPos,

      '&::before': {
        boxShadow: `2px 2px 2px 0 ${arrowShadowColor}`
      }
    },

    '&[data-popper-placement^="bottom"]': {
      marginTop: popoverMargin,
      transformOrigin: 'top center'
    },

    '&[data-popper-placement^="bottom"] [data-popper-arrow]': {
      top: arrowPos,

      '&::before': {
        boxShadow: `-1px -1px 1px 0 ${arrowShadowColor}`
      }
    },

    '&[data-popper-placement^="right"]': {
      marginLeft: popoverMargin,
      transformOrigin: 'left center'
    },

    '&[data-popper-placement^="right"] [data-popper-arrow]': {
      left: arrowPos,

      '&::before': {
        boxShadow: `-1px 1px 1px 0 ${arrowShadowColor}`
      }
    },

    '&[data-popper-placement^="left"]': {
      marginRight: popoverMargin,
      transformOrigin: 'right center'
    },

    '&[data-popper-placement^="left"] [data-popper-arrow]': {
      right: arrowPos,
      '&::before': {
        boxShadow: `1px -1px 1px 0 ${arrowShadowColor}`
      }
    }
  })
}
Evaluates popper arrow styles
@param {{ arrowSize: String, arrowShadowColor: String, hasArrow: Boolean}} props
@returns {String} Popper Arrow styles