"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const styles_1 = require("../../styles");
const Tooltip_1 = require("./Tooltip");
const tooltipSpace = 5;
const arrowSize = 8;
exports.GlobalStyles = styles_1.createGlobalStyle `
  .popper,
  .tooltip {
    position: absolute;
    text-align: center;
    z-index: ${({ theme }) => theme.zIndexes.tooltips};    
  }
  .popper .popper__arrow,
  .tooltip .tooltip-arrow,
  .tooltip .tooltip-arrow:before {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: ${tooltipSpace}px;
  }
  .tooltip .tooltip-arrow:before {
    content: "";
    margin: 0;
    z-index: -1;
    border-color: rgba(21, 41, 53, 0.1);
  }
  .tooltip .tooltip-arrow,
  .popper .popper__arrow {
    border-color: currentColor;
  }
  .popper[x-placement^="top"],
  .tooltip[x-placement^="top"] {
    margin-bottom: ${arrowSize + tooltipSpace}px;
  }
  .popper[x-placement^="top"] .popper__arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow,
  .tooltip[x-placement^="top"] .tooltip-arrow:before {
    border-width: ${arrowSize}px ${arrowSize}px 0 ${arrowSize}px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    bottom: ${-arrowSize + 1}px;
    left: calc(50% - ${arrowSize}px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .tooltip[x-placement^="top"] .tooltip-arrow:before {
    bottom: -2px;
  }
  .popper[x-placement^="bottom"],
  .tooltip[x-placement^="bottom"] {
    margin-top: ${arrowSize + tooltipSpace}px;
  }
  .popper[x-placement^="bottom"] .popper__arrow,
  .tooltip[x-placement^="bottom"] .tooltip-arrow,
  .tooltip[x-placement^="bottom"] .tooltip-arrow:before {
    border-width: 0 ${arrowSize}px ${arrowSize}px ${arrowSize}px;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    top: ${-arrowSize + 1}px;
    left: calc(50% - ${arrowSize}px);
    margin-top: 0;
    margin-bottom: 0;
  }
  .tooltip[x-placement^="bottom"] .tooltip-arrow:before {
    border-bottom-width: 9px;
    top: -1px;
  }
  .tooltip[x-placement^="right"],
  .popper[x-placement^="right"] {
    margin-left: ${arrowSize + tooltipSpace}px;
  }
  .popper[x-placement^="right"] .popper__arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow,
  .tooltip[x-placement^="right"] .tooltip-arrow:before {
    border-width: ${arrowSize}px ${arrowSize}px ${arrowSize}px 0;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    left: ${-arrowSize + 1}px;
    top: calc(50% - ${arrowSize}px);
    margin-left: 0;
    margin-right: 0;
  }
  .tooltip[x-placement^="right"] .tooltip-arrow:before {
    left: -2px;
  }
  .popper[x-placement^="left"],
  .tooltip[x-placement^="left"] {
    margin-right: ${arrowSize + tooltipSpace}px;
  }
  .popper[x-placement^="left"] .popper__arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow,
  .tooltip[x-placement^="left"] .tooltip-arrow:before {
    border-width: ${arrowSize}px 0 ${arrowSize}px ${arrowSize}px;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    right: ${-arrowSize + 1}px;
    top: calc(50% - ${arrowSize}px);
    margin-left: 0;
    margin-right: 0;
  }
  .tooltip[x-placement^="left"] .tooltip-arrow:before {
    right: -2px;
  }
`;
exports.tooltipStyles = () => ({
    userSelect: 'auto',
    cursor: 'auto',
    display: 'none',
    '.tooltip &': {
        display: 'block',
    },
});
exports.getVariant = ({ theme, variant = Tooltip_1.defaultProps.variant, }) => ({
    primary: {
        boxShadow: theme.shadows[3],
        maxWidth: '15rem',
        backgroundColor: 'white',
        padding: '1rem',
        border: `1px solid #EBF0F7`,
        wordWrap: 'break-word',
        fontWeight: 'normal',
        lineHeight: theme.lineHeights.normal,
        fontSize: theme.fontSizes.baseText,
    },
    secondary: {
        boxShadow: theme.shadows[1],
        backgroundColor: theme.colors.gray[4],
        borderRadius: theme.radii[1],
        color: 'white',
        padding: `${theme.space[2]} ${theme.space[3]}`,
        fontSize: theme.fontSizes[0],
    },
    raw: {},
}[variant]);
//# sourceMappingURL=styles.js.map