"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NEGATIVE_PADDING = exports.TitleStyled = exports.ContainerStyled = exports.RemovePadding = exports.OverlayStyled = void 0;
const theme_1 = require("../../../theme");
const PADDING = (0, theme_1.pxToRem)(20);
const NEGATIVE_PADDING = (0, theme_1.pxToRem)(-20);
exports.NEGATIVE_PADDING = NEGATIVE_PADDING;
const overlay = (0, theme_1.keyframes)({
    from: {
        background: "rgba($background, 0)",
    },
    to: {
        background: "rgba($background, 0.3)",
    },
});
const OverlayStyled = (0, theme_1.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: (0, theme_1.dimensionsPxToRem)(24),
            },
        },
        isClosing: {
            true: {
                animationDirection: "reverse",
            },
        },
    },
});
exports.OverlayStyled = OverlayStyled;
const container = (0, theme_1.keyframes)({
    from: {
        transform: "translateY(30px)",
        opacity: 0,
    },
    to: {
        transform: "translateY(0)",
        opacity: 1,
    },
});
const RemovePadding = (0, theme_1.styled)("div", {
    mx: NEGATIVE_PADDING,
});
exports.RemovePadding = RemovePadding;
const ContainerStyled = (0, theme_1.styled)("div", {
    "background": "$modalBg",
    "borderRadius": (0, theme_1.dimensionsPxToRem)(12),
    "maxWidth": (0, theme_1.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: (0, theme_1.dimensionsPxToRem)(1000),
            },
        },
        isClosing: {
            true: {
                animationDirection: "reverse",
            },
        },
    },
});
exports.ContainerStyled = ContainerStyled;
const TitleStyled = (0, theme_1.styled)("h2", {
    fontSize: (0, theme_1.fontPxToRem)(40),
    textAlign: "center",
    color: "$text3",
    margin: `${(0, theme_1.dimensionsPxToRem)(90)} 0`,
    fontWeight: "inherit",
});
exports.TitleStyled = TitleStyled;
//# sourceMappingURL=Modal.styled.js.map