import { __assign } from '../../node_modules/tslib/tslib.es6.js';
import { mode } from '@chakra-ui/theme-tools';
import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
import { modalAnatomy } from '@chakra-ui/anatomy';
import { zIndices } from '../shared/zIndices.js';
import { opacity } from '../shared/opacity.js';

var _a = createMultiStyleConfigHelpers(modalAnatomy.keys), defineMultiStyleConfig = _a.defineMultiStyleConfig, definePartsStyle = _a.definePartsStyle;
var baseStyleOverlay = defineStyle({
    bg: 'black',
    zIndex: 'modal',
    opacity: "".concat(opacity[40], " !important"),
});
var baseStyleDialogContainer = defineStyle({
    display: 'flex',
    zIndex: 'modal',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    overscrollBehaviorY: 'none',
});
var baseStyleDialog = defineStyle({
    borderRadius: 'sm',
    bg: mode('white', 'gray.700'),
    color: 'inherit',
    my: 'lg',
    zIndex: 'modal',
    boxShadow: mode('lg', 'dark-lg'),
});
var baseStyleHeader = defineStyle({
    px: 'lg',
    py: 'xl',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    position: 'relative',
});
var baseStyleCloseButton = defineStyle({
    width: 'sm',
    height: 'sm',
});
var baseStyleBody = defineStyle({
    p: '2xl',
    flex: '1',
});
var baseStyleFooter = defineStyle({
    px: 'lg',
    py: 'md',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
});
var baseStyle = definePartsStyle({
    overlay: baseStyleOverlay,
    dialogContainer: baseStyleDialogContainer,
    dialog: baseStyleDialog,
    header: baseStyleHeader,
    closeButton: baseStyleCloseButton,
    body: baseStyleBody,
    footer: baseStyleFooter,
});
var variants = {
    base: baseStyle,
    topScroll: __assign(__assign({}, baseStyle), { dialogContainer: __assign(__assign({}, baseStyle.dialogContainer), { alignItems: 'flex-start', overflow: 'auto', paddingTop: defineStyle({
                base: '',
                sm: '5xl',
            }) }) }),
    fullScreen: {
        overlay: {
            bg: 'black',
            zIndex: 'modal',
            width: '100vw',
        },
        dialogContainer: {
            width: '100vw',
            color: 'white',
            zIndex: zIndices.fullScreenModal,
        },
        header: baseStyleHeader,
        closeButton: baseStyleCloseButton,
        body: {
            p: '0',
            flex: '1',
        },
        footer: baseStyleFooter,
        dialog: {
            maxW: '100vw',
            minH: '100vh',
            bg: 'black',
            my: '0',
            borderRadius: '0',
        },
    },
};
function getSize(value) {
    if (value === 'full') {
        return definePartsStyle({
            dialog: {
                maxW: '100vw',
                minH: '$100vh',
                my: '0',
                borderRadius: '0',
            },
        });
    }
    return definePartsStyle({
        dialog: { maxW: value },
    });
}
var sizes = {
    md: getSize('7xl'),
    lg: getSize('8xl'),
    auth0: getSize('auth0-width'),
    full: getSize('full'),
};
var Modal = defineMultiStyleConfig({
    variants: variants,
    sizes: sizes,
    defaultProps: { size: 'md', variant: 'base' },
});

export { Modal as default };
//# sourceMappingURL=modal.js.map
