import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { colorModeStyle } from "../../../css/colorModeStyle.mjs";
import { vars } from "../../../themes/vars.css.mjs";
setFileScope("src/lib/components/private/Field/Field.css.ts", "braid-design-system");
const field = style({}, "field");
const placeholderColor = style({
  "::placeholder": {
    color: vars.foregroundColor.secondary
  }
}, "placeholderColor");
const secondaryIconSpace = style({
  paddingRight: vars.touchableSize
}, "secondaryIconSpace");
const textLeftOffset = "2px";
const iconSpace = style({
  paddingLeft: calc.subtract(vars.touchableSize, textLeftOffset)
}, "iconSpace");
const hideBorderOnDarkBackgroundInLightMode = style(colorModeStyle({
  lightMode: {
    opacity: 0
  }
}), "hideBorderOnDarkBackgroundInLightMode");
const focusOverlay = style({
  selectors: {
    [`${field}:focus ~ &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
const hoverOverlay = style({
  selectors: {
    [`${field}:hover:not(:disabled) ~ &, ${field}:focus ~ &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
const verticalDivider = style({
  width: vars.borderWidth.standard,
  background: vars.borderColor.field,
  opacity: 0.4
}, "verticalDivider");
endFileScope();
export {
  field,
  focusOverlay,
  hideBorderOnDarkBackgroundInLightMode,
  hoverOverlay,
  iconSpace,
  placeholderColor,
  secondaryIconSpace,
  verticalDivider
};
