import { jsx as _jsx } from "react/jsx-runtime";
import { styled, useStyleConfig, vui } from '../core';
import { colors } from '../theme';
import { cs, HSLToRGBA, parseHSL } from '../utils';
import { useModalContext } from './context';
const { h, s, l } = parseHSL(colors.sandstone[5]);
const rgba = HSLToRGBA(h, s, l, 0.6);
export const ModalBackdropBase = styled.divBox `
  background-color: ${rgba};
  inset: 0;
  position: fixed;
  z-index: modal;
`;
/** Displays a dark overlay underneath modal content, but on top of page content. */
export const ModalBackdrop = vui((props, ref) => {
    const { className, ...rest } = props;
    const styles = useStyleConfig('Modal', useModalContext());
    return (_jsx(ModalBackdropBase, { animation: "fadeIn", className: cs('vui-modalBackdrop', className), ref: ref, ...styles.backdrop, ...rest }));
});
ModalBackdrop.displayName = 'ModalBackdrop';
export default ModalBackdrop;
//# sourceMappingURL=modalBackdrop.js.map