import styled from 'styled-components';

const css = styled.div;

export const Container = css<any>`
   background: white;
   margin: auto;
   position: relative;
   width: ${(p) => (p.width ? `${p.width}px` : 'auto')};
   height: ${(p) => (p.height ? `${p.height}px` : 'auto')};
   display: flex;
   flex-direction: column;
   max-height: 100%;
   ${(p) => p.pageView && 'width: auto; height: auto; display: block; max-height: auto;'}

   .justify-center {
      justify-content: center;
   }
   .title-container {
      padding: 10px 30px;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;

      .title-name {
         flex: 1;
      }
   }

   .body-container {
      padding: 15px 30px;
      flex: 1;
      overflow: auto;
   }

   .actions-container {
      padding: 10px 30px;
   }

   @media (max-width: 850px) {
      .title-container {
         padding: 10px 20px;
      }

      .body-container {
         padding: 15px 20px;
      }

      .actions-container {
         padding: 10px 20px;
      }
   }
`;
