"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_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
const styles_lib_components_private_touchable_hitArea_cjs = require("../touchable/hitArea.cjs");
const styles_lib_components_private_touchable_debugTouchable_cjs = require("../touchable/debugTouchable.cjs");
const styles_lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
__vanilla_filescope__.setFileScope("src/lib/components/private/InlineField/InlineField.css.ts", "braid-design-system");
const sizes = {
  standard: "standard",
  small: "small"
};
const fieldSize = css.createVar("fieldSize");
const labelCapHeight = css.createVar("labelCapHeight");
const sizeVars = css.styleVariants(sizes, (size) => styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  mobile: {
    vars: {
      [fieldSize]: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].mobile.capHeight
    }
  },
  tablet: {
    vars: {
      [labelCapHeight]: styles_lib_themes_vars_css_cjs.vars.textSize[size].tablet.capHeight
    }
  }
}), "sizeVars");
const hitAreaOffset = cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(fieldSize).divide(2).negate().toString();
const realField = css.style([{
  width: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea,
  top: hitAreaOffset,
  left: hitAreaOffset
}, styles_lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
const fakeField = css.style({
  height: fieldSize,
  width: fieldSize,
  selectors: {
    // Overrides `surface` background of checked checkbox
    // to make `formAccent` edge crisp on dark background
    [`${realField}[type="checkbox"]:checked ~ &`]: {
      background: "transparent"
    }
  }
}, "fakeField");
const labelOffset = css.style({
  paddingTop: cssUtils.calc(fieldSize).subtract(labelCapHeight).divide(2).toString()
}, "labelOffset");
const isMixed = css.style({}, "isMixed");
const children = css.style({
  selectors: {
    [`${realField}:checked ~ * &,
      ${realField}${isMixed} ~ * &`]: {
      display: "block",
      zIndex: 1
    }
  }
}, "children");
const selected = css.style({
  selectors: {
    [`${realField}:checked + ${fakeField} > &,
      ${realField}${isMixed} + ${fakeField} > &`]: {
      opacity: 1
    }
  }
}, "selected");
const hideBorderOnDarkBackgroundInLightMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
  lightMode: {
    opacity: 0
  }
}), "hideBorderOnDarkBackgroundInLightMode");
const focusOverlay = css.style({
  selectors: {
    [`${realField}:focus + ${fakeField} > &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
const hoverOverlay = css.style({
  selectors: {
    [`${realField}:hover:not(:checked):not(${isMixed}):not(:disabled) + ${fakeField} > &,
      ${realField}:focus:not(${isMixed}) + ${fakeField} > &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
const indicator = css.style({
  selectors: {
    [`${hoverOverlay} > &`]: {
      opacity: 0.2
    }
  }
}, "indicator");
const checkboxScale = css.style({
  transform: "scale(0.85)",
  selectors: {
    [`${realField}:active + ${fakeField} > * > &`]: {
      transform: "scale(0.75)"
    }
  }
}, "checkboxScale");
const checkboxIndicator = [indicator, checkboxScale];
const radioScale = css.style({
  transform: "scale(0.6)",
  selectors: {
    [`${realField}:active + ${fakeField} > * > &`]: {
      transform: "scale(0.5)"
    }
  }
}, "radioScale");
const radioIndicator = [indicator, radioScale];
__vanilla_filescope__.endFileScope();
exports.checkboxIndicator = checkboxIndicator;
exports.children = children;
exports.fakeField = fakeField;
exports.focusOverlay = focusOverlay;
exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
exports.hoverOverlay = hoverOverlay;
exports.isMixed = isMixed;
exports.labelOffset = labelOffset;
exports.radioIndicator = radioIndicator;
exports.realField = realField;
exports.selected = selected;
exports.sizeVars = sizeVars;
