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

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

type PageWrapperProps = {
  isIOS?: boolean,
  isTourOpen?: boolean,
}

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

  ${({ isTourOpen }) => (isTourOpen
    ? css`
        pointer-events: none;
        overflow: hidden;
    `
    : '')}
  
  ~ .reactour__popover {
    ${isMobileDevice
    ? css`
        @media screen and (orientation: landscape) {
          /* добавлен important чтобы переопределить стили либы */
          left: 50% !important;
          top: auto !important;
          bottom: 0;
          width: 70vw !important;
          transform: translate(-50%, 0) !important;
      }`
    : ''};

  }
`

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