import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/TooltipRenderer/TooltipRenderer.css.ts", "braid-design-system");
const constants = {
  maxWidth: "260px",
  arrowSize: "12px"
};
const maxWidth = style({
  maxWidth: constants.maxWidth
}, "maxWidth");
const verticalOffsetBeforeEntrance = style({
  transform: "translateZ(0) translateY(4px)",
  selectors: {
    "[data-popper-placement^=bottom] &": {
      transform: "translateZ(0) translateY(-4px)"
    }
  }
}, "verticalOffsetBeforeEntrance");
const translateZ0 = style({
  transform: "translateZ(0)"
}, "translateZ0");
const borderRadius = vars.borderRadius.small;
const offset = calc(constants.arrowSize).divide(2).negate().toString();
const arrow = style({
  visibility: "hidden",
  ":before": {
    visibility: "visible",
    content: "''",
    transform: "rotate(45deg)"
  },
  selectors: {
    "&, &::before": {
      width: calc.add(constants.arrowSize, calc.multiply(borderRadius, 2)),
      height: calc.add(constants.arrowSize, calc.multiply(borderRadius, 2)),
      position: "absolute",
      background: "inherit",
      borderRadius
    },
    "[data-popper-placement^=top] &": {
      bottom: offset
    },
    "[data-popper-placement^=bottom] &": {
      top: offset
    },
    "[data-popper-placement^=left] &": {
      right: offset
    },
    "[data-popper-placement^=right] &": {
      left: offset
    }
  }
}, "arrow");
endFileScope();
export {
  arrow,
  maxWidth,
  translateZ0,
  verticalOffsetBeforeEntrance
};
