import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style } from "@vanilla-extract/css";
import { atoms } from "../../../css/atoms/atoms.mjs";
import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
import { vars } from "../../../themes/vars.css.mjs";
setFileScope("src/lib/components/Textarea/Highlight/Highlight.css.ts", "braid-design-system");
const space = "2px";
const root = style([atoms({
  borderRadius: "small"
}), {
  padding: `0 ${space}`,
  margin: `0 -${space}`,
  textDecoration: "underline",
  textDecorationStyle: "wavy",
  textDecorationSkipInk: "none",
  textDecorationThickness: 2,
  textUnderlineOffset: 2
}], "root");
const critical = style(colorModeStyle({
  lightMode: {
    textDecorationColor: vars.borderColor.critical,
    background: vars.backgroundColor.criticalLight
  },
  darkMode: {
    textDecorationColor: vars.borderColor.criticalLight
  }
}), "critical");
const caution = style([{
  textDecorationColor: vars.borderColor.caution
}, colorModeStyle({
  lightMode: {
    background: vars.backgroundColor.cautionLight
  }
})], "caution");
endFileScope();
export {
  caution,
  critical,
  root
};
