import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, styleVariants } from "@vanilla-extract/css";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/hooks/useIcon/icon.css.ts", "braid-design-system");
const iconScaleIncrease = 0.2;
const size = style({
  width: `${1 + iconScaleIncrease}em`,
  height: `${1 + iconScaleIncrease}em`
}, "size");
const cropToTextSize = style({
  margin: `${iconScaleIncrease / 2 * -1}em`
}, "cropToTextSize");
const inlineCrop = style({
  marginTop: `-${iconScaleIncrease}em`,
  marginBottom: `-${iconScaleIncrease}em`
}, "inlineCrop");
const inline = style({
  verticalAlign: "middle"
}, "inline");
const uppercaseNudge = -0.105;
const lowercaseNudge = uppercaseNudge + 0.04;
const verticalCorrection = 0.06;
const alignY = {
  uppercase: styleVariants({
    none: {
      top: `${uppercaseNudge}em`
    },
    up: {
      top: `${uppercaseNudge - verticalCorrection}em`
    },
    down: {
      top: `${uppercaseNudge + verticalCorrection}em`
    }
  }, "alignY_uppercase"),
  lowercase: styleVariants({
    none: {
      top: `${lowercaseNudge}em`
    },
    up: {
      top: `${lowercaseNudge - verticalCorrection}em`
    },
    down: {
      top: `${lowercaseNudge + verticalCorrection}em`
    }
  }, "alignY_lowercase")
};
const blockWidths = styleVariants(vars.textSize, ({
  mobile,
  tablet
}) => responsiveStyle({
  mobile: {
    width: mobile.lineHeight
  },
  tablet: {
    width: tablet.lineHeight
  }
}), "blockWidths");
endFileScope();
export {
  alignY,
  blockWidths,
  cropToTextSize,
  inline,
  inlineCrop,
  size
};
