import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, createVar, styleVariants } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/MenuRenderer/MenuRenderer.css.ts", "braid-design-system");
const backdrop = style({
  width: "100vw",
  height: "100vh"
}, "backdrop");
const menuIsClosed = style({
  transform: `translateY(${calc(vars.grid).negate().multiply(2)})`,
  visibility: "hidden"
}, "menuIsClosed");
const widthVar = createVar("widthVar");
const baseWidth = style({
  width: calc(widthVar).divide(4).toString()
}, "baseWidth");
const {
  small,
  medium,
  large
} = vars.contentWidth;
const width = styleVariants({
  small,
  medium,
  large
}, (w) => [baseWidth, {
  vars: {
    [widthVar]: w
  }
}], "width");
const placementBottom = style({
  bottom: "100%"
}, "placementBottom");
endFileScope();
export {
  backdrop,
  menuIsClosed,
  placementBottom,
  width
};
