import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { createVar, style } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/MenuItemCheckbox/MenuItemCheckbox.css.ts", "braid-design-system");
const checkboxFieldSize = vars.inlineFieldSize.small;
const menuItemCapHeight = createVar("menuItemCapHeight");
const crop = createVar("crop");
const checkboxSize = style([responsiveStyle({
  mobile: {
    vars: {
      [menuItemCapHeight]: vars.textSize.standard.mobile.capHeight,
      [crop]: calc(checkboxFieldSize).subtract(menuItemCapHeight).divide(2).negate().toString()
    }
  },
  tablet: {
    vars: {
      [menuItemCapHeight]: vars.textSize.standard.tablet.capHeight
    }
  }
}), {
  height: checkboxFieldSize,
  width: checkboxFieldSize,
  marginTop: crop,
  marginBottom: crop
}], "checkboxSize");
endFileScope();
export {
  checkboxSize
};
