/**
 * 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`
  margin: 3.5rem 0 ${footerHeight};
  height: calc(100vh - 3.5rem - ${footerHeight});
  overflow: auto;
  display: flex;
  overflow-x: hidden;
`;

export const Body = styled.default.div`
  width: 100%;
  margin: 4rem 0;
  padding: 0 ${Theme.spacing.xlarge};
  background: ${Theme.colors.gray900};
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 2rem);
  overflow: auto;
  max-height: calc(100vh - 2rem);
  max-width: calc(100vw - 2rem);
`;

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;
`;