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