import { Paper } from '../Paper';
import { styled } from '../styled';
import { pageLayoutClassnames } from './constants';
export const Wrapper = styled.div `
  display: grid;
  grid-row-gap: ${({ theme }) => theme.spacing(4)};
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  flex-grow: 1;

  height: 100%;
  min-height: 0;
  padding-top: ${({ theme }) => theme.spacing(4)};

  background-color: ${({ theme }) => theme.palette.common.white};

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    grid-row-gap: ${({ theme }) => theme.spacing(2)};

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

  ${({ theme }) => theme.breakpoints.down('sm')} {
    scroll-behavior: smooth;

    overflow: hidden auto;
    display: flex;
    grid-row-gap: 0;
    flex-direction: column;

    margin-bottom: 0;
    padding-top: 0;

    background-color: ${({ theme }) => theme.palette.background.body};
    border: unset;
  }
`;
export const StyledPaper = styled(Paper) `
  height: 100%;
  
  ${({ theme }) => theme.breakpoints.down('sm')} {
    border: unset;

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