import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'
import { customScrollbar } from 'features/Common'

export const PageWrapper = styled.div<{isIOS?: boolean}>`
  width: 100%;
  touch-action: ${({ isIOS }) => (isIOS ? 'none' : 'unset')};
`

export const Main = styled.main`
  display: flex;
`

export const Content = styled.div`
  padding-top: 0.95rem;
  padding-left: 0.38rem;
  flex-grow: 1;
  height: calc(100vh - 8.5rem);
  overflow-y: auto;

  ${customScrollbar}
  ${isMobileDevice
    ? css`
      padding-bottom: 23px;
      height: calc(100vh - 174px);
    `
    : ''};

  
`

export const BodyBackdrop = styled.div`
  position: fixed;
  top: 8.5rem;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100vw;
  height: calc(100vh - 8.5rem);
  z-index: 2;
`