import { PageContent, pageContentClassnames, } from '../../components/PageContent';
import { PageHeader, pageHeaderClassnames } from '../../components/PageHeader';
import { styled } from '../../components/styled';
import { formPageContentClassnames } from './constants';
export const DesktopAlertWrapper = styled.div `
  display: block;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const MobileAlertWrapper = styled.div `
  display: none;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: block;
  }
`;
export const StyledPageContent = styled(PageContent) `
  scrollbar-gutter: stable;

  overflow: auto;

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

  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};

  .${pageContentClassnames.content} {
    ${({ theme }) => theme.breakpoints.up('sm')} {
      overflow: unset;

      height: auto;
      padding: 0;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-bottom: ${({ theme }) => theme.spacing(20)};
    padding-top: 0;

    &.${formPageContentClassnames.formPageContentSecondaryActions} {
      margin-bottom: ${({ theme }) => theme.spacing(32)};

      &.${formPageContentClassnames.formWizardPageContentActions} {
        margin-bottom: ${({ theme }) => theme.spacing(50)};
      }
    }
  }
`;
export const StyledPageHeader = styled(PageHeader) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    .${pageHeaderClassnames.pageHeaderMobileTitle} {
      padding-right: ${({ theme }) => theme.spacing(1)};
    }
  }
`;
