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

import { isMobileDevice } from 'config/userAgent'

import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'

export const ScModal = styled(BaseModal)`
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 53;

  ${ModalWindow} {
    width: 800px;
    padding: 50px;
    background-color: #333333;
    border-radius: 5px;
    justify-content: center;

    ${isMobileDevice
    ? css`
      text-align: center;
      font-size: 16px;
      padding: 50px 0px;
      width: calc(100vw - 30px);
      @media screen and (orientation: landscape){
        max-width: calc(100vw - 80px);
        height: calc(100vh - 60px);
        overflow: auto;
      }
    `
    : ''};
  }
`

export const LoaderWrapper = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 20;
`
