import styled from 'styled-components';
import {
  media,
  REM_UNIT_MD,
} from '@vincent_za/styles';

export const PageWrap = styled.div`
  display: ${props => !props.isDisplayOnLoaded || (props.isDisplayOnLoaded && props.isLoaded) ? 'flex' : 'none'};
  position: relative;
  flex-direction: column;
  flex-grow: 1;
  overflow: ${props => props.isHideOverflow ? 'hidden' : 'visible'};
`;

export const PageVHWrap = styled.div`
  display: flex;

  ${media.sm`
  `};
`;

export const PageActionWrap = styled.div`
  display: flex;
  align-items: center;
  margin-right: ${REM_UNIT_MD};
  margin-bottom: ${REM_UNIT_MD};
  margin-left: auto;
  line-height: 1;
`;

export const PageContentWrap = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0;
  background-color: ${props => (props.displayPageBackground ? 'rgba(255, 255, 255, 0.05)' : 'transparent')};
`;

export const PageShowOnLoaded = styled.div`
  display: ${props => props.isBusy ? 'none' : 'block'};
`;

export const PageSectionWrap = styled.div`
  display: ${props => props.isHidden ? 'none' : 'flex'};
  flex-direction: column;
`;

export const PageSectionActionWrap = styled.div`
  display: flex;
  align-items: center;
  margin-left: auto;
`;

export const PageDivider = styled.div`
  height: 3.2rem;
`;
