"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_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
__vanilla_filescope__.setFileScope("src/lib/components/private/Field/Field.css.ts", "braid-design-system");
const field = css.style({}, "field");
const placeholderColor = css.style({
  "::placeholder": {
    color: styles_lib_themes_vars_css_cjs.vars.foregroundColor.secondary
  }
}, "placeholderColor");
const secondaryIconSpace = css.style({
  paddingRight: styles_lib_themes_vars_css_cjs.vars.touchableSize
}, "secondaryIconSpace");
const textLeftOffset = "2px";
const iconSpace = css.style({
  paddingLeft: cssUtils.calc.subtract(styles_lib_themes_vars_css_cjs.vars.touchableSize, textLeftOffset)
}, "iconSpace");
const hideBorderOnDarkBackgroundInLightMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
  lightMode: {
    opacity: 0
  }
}), "hideBorderOnDarkBackgroundInLightMode");
const focusOverlay = css.style({
  selectors: {
    [`${field}:focus ~ &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
const hoverOverlay = css.style({
  selectors: {
    [`${field}:hover:not(:disabled) ~ &, ${field}:focus ~ &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
const verticalDivider = css.style({
  width: styles_lib_themes_vars_css_cjs.vars.borderWidth.standard,
  background: styles_lib_themes_vars_css_cjs.vars.borderColor.field,
  opacity: 0.4
}, "verticalDivider");
__vanilla_filescope__.endFileScope();
exports.field = field;
exports.focusOverlay = focusOverlay;
exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
exports.hoverOverlay = hoverOverlay;
exports.iconSpace = iconSpace;
exports.placeholderColor = placeholderColor;
exports.secondaryIconSpace = secondaryIconSpace;
exports.verticalDivider = verticalDivider;
