"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledPaper = exports.Wrapper = void 0;
const Paper_1 = require("../Paper");
const styled_1 = require("../styled");
const constants_1 = require("./constants");
exports.Wrapper = styled_1.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;
  }
`;
exports.StyledPaper = (0, styled_1.styled)(Paper_1.Paper) `
  height: 100%;
  
  ${({ theme }) => theme.breakpoints.down('sm')} {
    border: unset;

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