/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';

import Dialog, { DialogProps } from '@material-ui/core/Dialog';
import { ThemeObject } from '../Theme';

export const StyledModal = styled(
  (props: DialogProps & { $theme: ThemeObject; $background: keyof ThemeObject['background'] }) => <Dialog {...props} />
)`
  & .MuiPaper-root.MuiDialog-paperWidthSm {
    background-color: ${(props) => props.$theme.background[props.$background]};
    transition: all 0.25s !important;
  }
`;
