import { makeStyles } from '@cleartrip/ct-design-style-manager';
import { ModalVariant } from '../constants';

export const staticBackdropStyles = makeStyles(() => ({
  root: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: -1,
    inset: 0,
  },
}));

export const getBackdropDynamicStyles = ({ blur, variant }: { blur?: boolean; variant?: `${ModalVariant}` }) => ({
  backgroundColor: blur ? 'rgba(26, 26, 26, 0.6)' : '',
  // @ts-ignore
  backdropFilter: variant !== ModalVariant.DARK && blur ? 'blur(1px)' : 'none',
});