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

import { Modal } from '@fluentui/react';
import { ThemeObject } from '../Theme';
import { FluentModalProps } from './types.d';

export const StyledFluentModal = styled(
  (props: FluentModalProps & { $theme: ThemeObject; $background: keyof ThemeObject['background'] }) => <Modal {...props} />
)`
  & .ms-Dialog-main {
    background-color: ${(props) => props.$theme.background[props.$background]};
    transition: all 0.25s !important;
  }
`;
