import styled, { css } from 'styled-components';
var placementStyleMap = {
  bottom: css(["&::before,&::after{border-width:0 5px 5px;}&::before{top:-6px;}&::after{top:-5px;}"]),
  top: css(["bottom:-6px;&::before,&::after{border-width:5px 5px 0;}&::before{z-index:0;top:-5px;}&::after{z-index:1;top:-6px;}"]),
  left: css(["right:-2px;&::before,&::after{border-width:0 5px 5px;transform:rotate(90deg);}&::before{left:1px;}&::after{left:0;}"]),
  right: css(["left:-2px;&::before,&::after{border-width:0 5px 5px;transform:rotate(-90deg);}&::before{left:-1px;}&::after{left:0;}"])
};
export var StyledArrow = styled.div.withConfig({
  displayName: "StyledArrow",
  componentId: "sc-1kxhhpn-0"
})(["position:relative;&::before,&::after{border-style:solid;content:'';display:block;position:absolute;width:0;margin-left:-5px;}&::before{z-index:0;}&::after{z-index:1;}", ""], function (_ref) {
  var _ref$$placement = _ref.$placement,
    $placement = _ref$$placement === void 0 ? 'bottom' : _ref$$placement;
  return placementStyleMap[$placement];
});