import { Button, buttonClasses } from '../../../components/Button';
import { styled } from '../../../components/styled';
import { Typography } from '../../../components/Typography';
export const Wrapper = styled.div `
  width: 400px;
  padding: ${({ theme }) => theme.spacing(4)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: auto;
  }
`;
export const Description = styled(Typography) `
  margin-bottom: ${({ theme }) => theme.spacing(3)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const FormFooter = styled.footer `
  display: flex;
  gap: ${({ theme }) => theme.spacing(3)};
  justify-content: end;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding-top: ${({ theme }) => theme.spacing(4)};

    & .${buttonClasses.root} {
      width: 100%;
      height: 48px;
    }
  }
`;
export const CancelButton = styled(Button) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
