import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, styleVariants } from "@vanilla-extract/css";
import { calc } from "@vanilla-extract/css-utils";
import { vars } from "../../themes/vars.css.mjs";
import { hitArea } from "../private/touchable/hitArea.mjs";
import { debugTouchable } from "../private/touchable/debugTouchable.mjs";
import { rgba } from "polished";
import { colorModeStyle } from "../../css/colorModeStyle.mjs";
setFileScope("src/lib/components/Toggle/Toggle.css.ts", "braid-design-system");
const sizes = {
  standard: "standard",
  small: "small"
};
const toggleWidthRatio = 1.6;
const root = style({
  ":hover": {
    zIndex: 1
  }
}, "root");
const realField = style([{
  height: hitArea
}, debugTouchable()], "realField");
const realFieldPosition = styleVariants(sizes, (size) => ({
  top: calc(hitArea).subtract(vars.inlineFieldSize[size]).divide(2).negate().toString()
}), "realFieldPosition");
const label = styleVariants(sizes, (size) => {
  const padding = calc(vars.inlineFieldSize[size]).subtract(vars.textSize.standard.mobile.lineHeight).divide(2).toString();
  return {
    paddingTop: padding,
    paddingBottom: padding
  };
}, "label");
const fieldSize = styleVariants(sizes, (size) => ({
  width: calc.multiply(vars.inlineFieldSize[size], toggleWidthRatio)
}), "fieldSize");
const slideContainer = style({}, "slideContainer");
const slideContainerSize = styleVariants(sizes, (size) => ({
  height: vars.inlineFieldSize[size]
}), "slideContainerSize");
const slideTrack = styleVariants(sizes, (size) => ({
  height: calc.subtract(vars.inlineFieldSize[size], vars.grid)
}), "slideTrack");
const slideTrackBgLightMode = styleVariants({
  light: colorModeStyle({
    lightMode: {
      background: rgba("#000", 0.08)
    }
  }),
  dark: colorModeStyle({
    lightMode: {
      background: rgba("#fff", 0.12)
    }
  })
}, "slideTrackBgLightMode");
const slideTrackBgDarkMode = styleVariants({
  light: colorModeStyle({
    darkMode: {
      background: rgba("#000", 0.08)
    }
  }),
  dark: colorModeStyle({
    darkMode: {
      background: rgba("#fff", 0.12)
    }
  })
}, "slideTrackBgDarkMode");
const slideTrackMask = 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 = style({
  selectors: {
    [`${realField}:not(:checked) + ${slideContainer} &`]: {
      transform: `translateX(${calc.negate(vars.touchableSize)})`
    }
  }
}, "slideTrackSelected");
const slider = styleVariants(sizes, (size) => {
  const slideDistance = calc(vars.inlineFieldSize[size]).multiply(toggleWidthRatio).subtract(vars.inlineFieldSize[size]).toString();
  const anticipationRatio = 0.12;
  const anticipation = calc.multiply(vars.inlineFieldSize[size], anticipationRatio);
  return {
    height: vars.inlineFieldSize[size],
    width: vars.inlineFieldSize[size],
    selectors: {
      [`${realField}:active + ${slideContainer} &`]: {
        transform: `translateX(${calc.negate(anticipation)})`
      },
      [`${realField}:checked + ${slideContainer} &`]: {
        transform: `translateX(${slideDistance})`
      },
      [`${realField}:active:checked + ${slideContainer} &`]: {
        transform: `translateX(${calc.add(slideDistance, anticipation)})`
      }
    }
  };
}, "slider");
const icon = 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 = style(colorModeStyle({
  lightMode: {
    opacity: 0
  }
}), "hideBorderOnDarkBackgroundInLightMode");
const focusOverlay = style({
  selectors: {
    [`${realField}:focus + ${slideContainer} &,
      ${realField}:active + ${slideContainer} &`]: {
      opacity: 1
    }
  }
}, "focusOverlay");
const hoverOverlay = style({
  selectors: {
    [`${realField}:hover:not(:disabled) + ${slideContainer} &,
      ${realField}:focus + ${slideContainer} &`]: {
      opacity: 1
    }
  }
}, "hoverOverlay");
endFileScope();
export {
  fieldSize,
  focusOverlay,
  hideBorderOnDarkBackgroundInLightMode,
  hoverOverlay,
  icon,
  label,
  realField,
  realFieldPosition,
  root,
  slideContainer,
  slideContainerSize,
  slideTrack,
  slideTrackBgDarkMode,
  slideTrackBgLightMode,
  slideTrackMask,
  slideTrackSelected,
  slider
};
