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