import { dimensionsPxToRem, fontPxToRem, keyframes, pxToRem, styled } from "../../../theme.js";
const PADDING = pxToRem(20);
const NEGATIVE_PADDING = pxToRem(-20);
const overlay = keyframes({
    from: {
        background: "rgba($background, 0)",
    },
    to: {
        background: "rgba($background, 0.3)",
    },
});
const OverlayStyled = styled("div", {
    "position": "fixed",
    "zIndex": 4,
    "top": 0,
    "bottom": 0,
    "left": 0,
    "right": 0,
    "display": "flex",
    "alignItems": "center",
    "justifyContent": "center",
    "animation": `${overlay.toString()} 300ms`,
    "animationFillMode": "forwards",
    "backdropFilter": "blur(5px)",
    "@media (prefers-reduced-motion: reduce)": {
        animation: "none",
        background: "rgba($background, 0.3)",
    },
    "variants": {
        position: {
            bottom: {
                alignItems: "flex-end",
                paddingBottom: dimensionsPxToRem(24),
            },
        },
        isClosing: {
            true: {
                animationDirection: "reverse",
            },
        },
    },
});
const container = keyframes({
    from: {
        transform: "translateY(30px)",
        opacity: 0,
    },
    to: {
        transform: "translateY(0)",
        opacity: 1,
    },
});
const RemovePadding = styled("div", {
    mx: NEGATIVE_PADDING,
});
const ContainerStyled = styled("div", {
    "background": "$modalBg",
    "borderRadius": dimensionsPxToRem(12),
    "maxWidth": pxToRem(333),
    "maxHeight": "100%",
    "width": "calc(100% - 30px)",
    "padding": PADDING,
    "position": "relative",
    "boxSizing": "border-box",
    "overflowY": "auto",
    "overscrollBehavior": "contain",
    "animation": `${container.toString()} 300ms`,
    "animationFillMode": "forwards",
    "&:focus": {
        outline: "none",
    },
    "@media (prefers-reduced-motion: reduce)": {
        animation: "none",
        opacity: 1,
        transform: "none",
    },
    "variants": {
        full: {
            true: {
                width: "calc(100vw - 30px)",
                maxWidth: dimensionsPxToRem(1000),
            },
        },
        isClosing: {
            true: {
                animationDirection: "reverse",
            },
        },
    },
});
const TitleStyled = styled("h2", {
    fontSize: fontPxToRem(40),
    textAlign: "center",
    color: "$text3",
    margin: `${dimensionsPxToRem(90)} 0`,
    fontWeight: "inherit",
});
export { OverlayStyled, RemovePadding, ContainerStyled, TitleStyled, NEGATIVE_PADDING, };
//# sourceMappingURL=Modal.styled.js.map