/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Theme from 'theme';

interface IColumn {
  align?: string;
  size?: number;
  padding?: string;
}

const {footerHeight} = Theme;

export const AppContainer = styled.default.div`
  flex: 1;
  display: flex;
  overflow-x: hidden;
  min-height: 0;
`;

export const Body = styled.default.div`
  flex: 1;
  padding: 1rem ${Theme.spacing.xlarge};
  padding-top: 5.5rem; /* Account for fixed header height (3.5rem) + padding */
  background: ${Theme.colors.gray900};
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
`;

export const Row = styled.default.div`
  display: flex;
`;

export const Column = styled.default.div<IColumn>`
  flex: ${({size}): number => size || 1};
  text-align: ${({align}): string => align || 'right'};
  ${({padding}) =>
    padding &&
    styled.css`
      padding: ${padding};
    `}
`;

export const Main = styled.default.div`
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
`;
