"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SectionContainer = void 0;
const styled_1 = require("../../styled");
const constants_1 = require("./constants");
exports.SectionContainer = styled_1.styled.div `
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(6)};

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

  border-top: none;

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

    border-top: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};
  }

  ${({ theme }) => theme.breakpoints.down('laptop')} {
    gap: ${({ theme }) => theme.spacing(5)};
  }

  ${({ theme }) => theme.breakpoints.up('sm')} {
    &.${constants_1.pageLayoutSectionContainerClassnames.withDivider} {
      & > :not(:last-child)::after {
        content: '';

        display: block;

        width: 100%;
        height: 1px;
        margin-top: ${({ theme }) => theme.spacing(6)};

        background-color: ${({ theme }) => theme.palette.grey[300]};
      }
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    overflow: unset;
    gap: ${({ theme }) => theme.spacing(4)};
    order: 4;

    &.${constants_1.pageLayoutSectionContainerClassnames.withAside} {
      padding-top: 0;

      border-top: none;
    }
  }
`;
