import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { spacing } from '../../../spacing';
const Container = styled.div `
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
`;
const FillAvailableFlexBox = styled.div `
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
`;
const sectionDistance = spacing.r2;
const ContextWrapper = styled.div `
  background: ${(props) => props.background ? props.theme[props.background] : 'initial'};
  height: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
`;
const ContextContainer = ({ children, background, ...rest }) => (_jsx(ContextWrapper, { background: background, children: _jsx(FillAvailableFlexBox, { ...rest, children: children }) }));
const OverallSummaryContainer = styled.div `
  background: ${(props) => props.theme[props.background || 'backgroundLevel2']};
  height: 6rem;
  padding: ${({ noPadding }) => (noPadding ? '0' : '0 1rem')};
  margin-bottom: ${({ noBottomMargin }) => noBottomMargin ? '0' : sectionDistance};
  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};
  box-sizing: border-box;
  display: flex;
  align-items: center;
`;
const OverallSummary = ({ children, noPadding, noBottomMargin, hasTopMargin, background, ...rest }) => (_jsx(OverallSummaryContainer, { background: background, noPadding: noPadding, noBottomMargin: noBottomMargin, hasTopMargin: hasTopMargin, children: _jsx(FillAvailableFlexBox, { ...rest, children: children }) }));
const MainContentContainer = styled.div `
  display: flex;
  flex: 1;
  padding: ${(props) => (props.hasPadding ? '1rem' : 'initial')};
  margin-top: ${({ hasTopMargin }) => (hasTopMargin ? '1rem' : '0')};
  background: ${(props) => props.theme[props.background || 'backgroundLevel3']};
  overflow: hidden;
`;
const MainContent = ({ children, hasPadding, background, hasTopMargin, ...rest }) => (_jsx(MainContentContainer, { hasPadding: hasPadding, hasTopMargin: hasTopMargin, background: background, ...rest, children: children }));
const AppChildrenContainer = styled.div `
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: ${(props) => (props.hasPadding ? '0 1rem' : 'initial')};
  width: 100%;
  box-sizing: border-box;
`;
function AppContainer({ children, sidebarNavigation, hasPadding, ...rest }) {
    return (_jsxs(Container, { ...rest, children: [sidebarNavigation, _jsx(AppChildrenContainer, { hasPadding: hasPadding, children: children })] }));
}
AppContainer.ContextContainer = ContextContainer;
AppContainer.OverallSummary = OverallSummary;
AppContainer.MainContent = MainContent;
AppContainer.sectionDistance = sectionDistance;
export { AppContainer };
