import styled, { css } from 'styled-components';
export var TRIANGLE_SIZE = 8;
export var TOP_OFFSET = 11;
var leftAndRightCss = css(["", ""], function (p) {
  switch (p.position) {
    case 'left':
      return 'left: 12px;';
    case 'center':
      return "left: calc(50% - ".concat(TRIANGLE_SIZE, "px);");
    case 'right':
    default:
      return 'right: 12px;';
  }
});
var bottomAndTopPlacementCss = css(["", ""], function (p) {
  switch (p.placement) {
    case 'top':
      return "transform: translateY(-".concat(TOP_OFFSET, "px);");
    case 'bottom':
    default:
      return "transform: translateY(".concat(TOP_OFFSET, "px);");
  }
});
var commonTriangleCss = css(["position:absolute;width:0;height:0;content:'';speak:none;border-left:", "px solid transparent;border-right:", "px solid transparent;"], TRIANGLE_SIZE, TRIANGLE_SIZE);
var getTrianglePositionAndColor = function getTrianglePositionAndColor(_ref) {
  var theme = _ref.theme,
    defaultColor = _ref.defaultColor,
    placement = _ref.placement,
    color = _ref.color,
    _ref$offset = _ref.offset,
    offset = _ref$offset === void 0 ? 0 : _ref$offset;
  var customColor = color && color(theme) || defaultColor;
  switch (placement) {
    case 'top':
      return "\n        top: ".concat(offset ? "calc(100% - ".concat(offset, "px)") : '100%', ";\n        border-top: ").concat(TRIANGLE_SIZE, "px solid;\n        border-top-color: ").concat(customColor, ";\n      ");
    case 'bottom':
    default:
      return "\n        bottom: ".concat(offset ? "calc(100% - ".concat(offset, "px)") : '100%', ";\n        border-bottom: ").concat(TRIANGLE_SIZE, "px solid;\n        border-bottom-color: ").concat(customColor, ";\n      ");
  }
};
var getColor = function getColor(theme, defaultColor, color) {
  return color && color(theme) || defaultColor;
};
var triangleCss = css(["&::before{", " ", " ", "}&::after{", " ", " ", "}"], leftAndRightCss, commonTriangleCss, function (p) {
  return getTrianglePositionAndColor({
    theme: p.theme,
    defaultColor: p.invertedColors ? p.theme.color.bubbleBorderInverted : p.theme.color.bubbleBorder,
    placement: p.placement,
    color: p.borderColor
  });
}, leftAndRightCss, commonTriangleCss, function (p) {
  return getTrianglePositionAndColor({
    theme: p.theme,
    defaultColor: p.invertedColors ? p.theme.color.bubbleBackgroundInverted : p.theme.color.bubbleBackground,
    placement: p.placement,
    color: p.backgroundColor,
    offset: 1
  });
});
export var DropdownBubble = styled.div.withConfig({
  displayName: "DropdownBubble",
  componentId: "sc-16ly6j0-0"
})(["position:relative;", " display:flex;flex-direction:column;min-height:0;border:1px solid ", ";background-color:", ";box-shadow:0 2px 4px 0 rgb(40 40 35 / 15%);color:", ";border-radius:", ";", " ", ""], function (p) {
  return p.maxHeight ? "max-height: ".concat(p.maxHeight, ";") : '';
}, function (p) {
  return getColor(p.theme, p.invertedColors ? p.theme.color.bubbleBorderInverted : p.theme.color.bubbleBorder, p.borderColor);
}, function (p) {
  return getColor(p.theme, p.invertedColors ? p.theme.color.bubbleBackgroundInverted : p.theme.color.bubbleBackground, p.backgroundColor);
}, function (p) {
  return getColor(p.theme, p.invertedColors ? p.theme.color.textLight : p.theme.color.text, p.textColor);
}, function (p) {
  return p.theme.borderRadius4;
}, bottomAndTopPlacementCss, function (_ref2) {
  var triangle = _ref2.triangle;
  return triangle ? triangleCss : '';
});