"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("../private/touchable/hitArea.cjs");
const styles_lib_components_private_touchable_debugTouchable_cjs = require("../private/touchable/debugTouchable.cjs");
const polished = require("polished");
const styles_lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
__vanilla_filescope__.setFileScope("src/lib/components/Toggle/Toggle.css.ts", "braid-design-system");
const sizes = {
  standard: "standard",
  small: "small"
};
const toggleWidthRatio = 1.6;
const root = css.style({
  ":hover": {
    zIndex: 1
  }
}, "root");
const realField = css.style([{
  height: styles_lib_components_private_touchable_hitArea_cjs.hitArea
}, styles_lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
const realFieldPosition = css.styleVariants(sizes, (size) => ({
  top: cssUtils.calc(styles_lib_components_private_touchable_hitArea_cjs.hitArea).subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).divide(2).negate().toString()
}), "realFieldPosition");
const label = css.styleVariants(sizes, (size) => {
  const padding = cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(styles_lib_themes_vars_css_cjs.vars.textSize.standard.mobile.lineHeight).divide(2).toString();
  return {
    paddingTop: padding,
    paddingBottom: padding
  };
}, "label");
const fieldSize = css.styleVariants(sizes, (size) => ({
  width: cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size], toggleWidthRatio)
}), "fieldSize");
const slideContainer = css.style({}, "slideContainer");
const slideContainerSize = css.styleVariants(sizes, (size) => ({
  height: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]
}), "slideContainerSize");
const slideTrack = css.styleVariants(sizes, (size) => ({
  height: cssUtils.calc.subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size], styles_lib_themes_vars_css_cjs.vars.grid)
}), "slideTrack");
const slideTrackBgLightMode = css.styleVariants({
  light: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      background: polished.rgba("#000", 0.08)
    }
  }),
  dark: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    lightMode: {
      background: polished.rgba("#fff", 0.12)
    }
  })
}, "slideTrackBgLightMode");
const slideTrackBgDarkMode = css.styleVariants({
  light: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    darkMode: {
      background: polished.rgba("#000", 0.08)
    }
  }),
  dark: styles_lib_css_colorModeStyle_cjs.colorModeStyle({
    darkMode: {
      background: polished.rgba("#fff", 0.12)
    }
  })
}, "slideTrackBgDarkMode");
const slideTrackMask = css.style({
  // Fix for Safari border-radius, overflow hidden, transform bug:
  // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
  WebkitMaskImage: "-webkit-radial-gradient(white, black)"
}, "slideTrackMask");
const slideTrackSelected = css.style({
  selectors: {
    [`${realField}:not(:checked) + ${slideContainer} &`]: {
      transform: `translateX(${cssUtils.calc.negate(styles_lib_themes_vars_css_cjs.vars.touchableSize)})`
    }
  }
}, "slideTrackSelected");
const slider = css.styleVariants(sizes, (size) => {
  const slideDistance = cssUtils.calc(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).multiply(toggleWidthRatio).subtract(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).toString();
  const anticipationRatio = 0.12;
  const anticipation = cssUtils.calc.multiply(styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size], anticipationRatio);
  return {
    height: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
    width: styles_lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
    selectors: {
      [`${realField}:active + ${slideContainer} &`]: {
        transform: `translateX(${cssUtils.calc.negate(anticipation)})`
      },
      [`${realField}:checked + ${slideContainer} &`]: {
        transform: `translateX(${slideDistance})`
      },
      [`${realField}:active:checked + ${slideContainer} &`]: {
        transform: `translateX(${cssUtils.calc.add(slideDistance, anticipation)})`
      }
    }
  };
}, "slider");
const icon = css.style({
  transform: "scale(.75)",
  selectors: {
    [`${realField}:active + ${slideContainer} &`]: {
      transform: "scale(.75) rotate(-25deg)"
    },
    [`${realField}:checked + ${slideContainer} &`]: {
      opacity: 1
    },
    [`${realField}:active:checked + ${slideContainer} &`]: {
      transform: "scale(.75) rotate(6deg)"
    }
  }
}, "icon");
const hideBorderOnDarkBackgroundInLightMode = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
  lightMode: {
    opacity: 0
  }
}), "hideBorderOnDarkBackgroundInLightMode");
const focusOverlay = css.style({
  selectors: {
    [`${realField}:focus + ${slideContainer} &,
      ${realField}:active + ${slideContainer} &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
const hoverOverlay = css.style({
  selectors: {
    [`${realField}:hover:not(:disabled) + ${slideContainer} &,
      ${realField}:focus + ${slideContainer} &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
__vanilla_filescope__.endFileScope();
exports.fieldSize = fieldSize;
exports.focusOverlay = focusOverlay;
exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
exports.hoverOverlay = hoverOverlay;
exports.icon = icon;
exports.label = label;
exports.realField = realField;
exports.realFieldPosition = realFieldPosition;
exports.root = root;
exports.slideContainer = slideContainer;
exports.slideContainerSize = slideContainerSize;
exports.slideTrack = slideTrack;
exports.slideTrackBgDarkMode = slideTrackBgDarkMode;
exports.slideTrackBgLightMode = slideTrackBgLightMode;
exports.slideTrackMask = slideTrackMask;
exports.slideTrackSelected = slideTrackSelected;
exports.slider = slider;
