"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_components_private_Modal_ModalExternalGutter_cjs = require("./ModalExternalGutter.cjs");
const styles_lib_css_responsiveStyle_cjs = require("../../../css/responsiveStyle.cjs");
const styles_lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
const styles_lib_css_colorModeStyle_cjs = require("../../../css/colorModeStyle.cjs");
__vanilla_filescope__.setFileScope("src/lib/components/private/Modal/Modal.css.ts", "braid-design-system");
const fixedStackingContext = styles_lib_css_atoms_atoms_cjs.atoms({
  position: "fixed",
  zIndex: "modal"
});
const resetStackingContext = styles_lib_css_atoms_atoms_cjs.atoms({
  position: "relative",
  zIndex: 0
});
const backdrop = css.style(styles_lib_css_colorModeStyle_cjs.colorModeStyle({
  lightMode: {
    background: "#000",
    opacity: 0.4
  },
  darkMode: {
    background: "#000",
    opacity: 0.6
  }
}), "backdrop");
const reducedMotion = css.style({
  "@media": {
    "screen and (prefers-reduced-motion)": {
      transform: "none !important"
    }
  }
}, "reducedMotion");
const entrance = {
  center: [reducedMotion, css.style({
    transform: "scale(.8)"
  }, "entrance_center")],
  right: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
    mobile: {
      opacity: 1,
      transform: "translateX(110%)"
    },
    tablet: {
      opacity: 0,
      transform: "translateX(40px)"
    }
  }), "entrance_right")],
  left: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
    mobile: {
      opacity: 1,
      transform: "translateX(-110%)"
    },
    tablet: {
      opacity: 0,
      transform: "translateX(-40px)"
    }
  }), "entrance_left")]
};
const exit = {
  right: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
    mobile: {
      opacity: 1,
      transform: "translateX(110%)"
    },
    tablet: {
      opacity: 0,
      transform: "translateX(10px)"
    }
  }), "exit_right")],
  left: [reducedMotion, css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
    mobile: {
      opacity: 1,
      transform: "translateX(-110%)"
    },
    tablet: {
      opacity: 0,
      transform: "translateX(-10px)"
    }
  }), "exit_left")]
};
const easeOut = "cubic-bezier(0.4, 0, 0, 1)";
const horiztontalTransition = css.style(styles_lib_css_responsiveStyle_cjs.responsiveStyle({
  mobile: {
    transition: `transform .3s ${easeOut}, opacity .3s ${easeOut}`
  },
  tablet: {
    transition: `transform .175s ${easeOut}, opacity .175s ${easeOut}`
  }
}), "horiztontalTransition");
const pointerEventsAll = css.style({
  pointerEvents: "all"
}, "pointerEventsAll");
const gutterSizeVar = css.createVar("gutterSizeVar");
const fullHeightVar = css.createVar("fullHeightVar");
const fullWidthVar = css.createVar("fullWidthVar");
const viewportHeight = css.style({
  maxHeight: fullHeightVar
}, "viewportHeight");
const maxSize = {
  center: css.style([{
    maxHeight: cssUtils.calc.subtract(fullHeightVar, cssUtils.calc.multiply(gutterSizeVar, 2)),
    maxWidth: cssUtils.calc.subtract(fullWidthVar, cssUtils.calc.multiply(gutterSizeVar, 2))
  }, styles_lib_css_responsiveStyle_cjs.responsiveStyle({
    mobile: {
      vars: {
        [gutterSizeVar]: styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.mobile]
      }
    },
    tablet: {
      vars: {
        [gutterSizeVar]: styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.tablet]
      }
    },
    desktop: {
      vars: {
        [gutterSizeVar]: styles_lib_themes_vars_css_cjs.vars.space[styles_lib_components_private_Modal_ModalExternalGutter_cjs.externalGutter.desktop]
      }
    }
  })], "maxSize_center"),
  right: viewportHeight,
  left: viewportHeight
};
const modalContainer = css.style({
  vars: {
    [fullHeightVar]: "100vh",
    [fullWidthVar]: "100vw"
  },
  "@supports": {
    "(height: 1dvh)": {
      vars: {
        [fullHeightVar]: "100dvh",
        [fullWidthVar]: "100dvw"
      }
    }
  },
  maxHeight: fullHeightVar,
  maxWidth: fullWidthVar
}, "modalContainer");
const headingRoot = css.style({
  overflowWrap: "break-word"
}, "headingRoot");
const headingFocus = css.style({
  selectors: {
    [`${headingRoot}:focus &`]: {
      opacity: 1
    }
  }
}, "headingFocus");
const closeIconOffset = css.style({
  top: "-5px",
  right: "-5px"
}, "closeIconOffset");
__vanilla_filescope__.endFileScope();
exports.backdrop = backdrop;
exports.closeIconOffset = closeIconOffset;
exports.entrance = entrance;
exports.exit = exit;
exports.fixedStackingContext = fixedStackingContext;
exports.headingFocus = headingFocus;
exports.headingRoot = headingRoot;
exports.horiztontalTransition = horiztontalTransition;
exports.maxSize = maxSize;
exports.modalContainer = modalContainer;
exports.pointerEventsAll = pointerEventsAll;
exports.resetStackingContext = resetStackingContext;
