import styled, { css } from 'styled-components/macro'
import { ModalWindow } from 'features/Modal/styled'
import { Modal as BaseModal } from 'features/Modal'
import { isMobileDevice } from 'config/userAgent'

export const Modal = styled(BaseModal)`
  background-color: rgba(0, 0, 0, 0.7);

  ${ModalWindow} {
    padding: 0;
    border-radius: 5px;

    ${isMobileDevice
    ? css`
      width: calc(100vw - 60px);
      @media screen and (orientation: landscape){
        max-width: calc(100vw - 80px);
        height: calc(100vh - 10px);
        overflow: auto;
      }
    `
    : ''};
  }
`