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 ScModal = styled(BaseModal)`
  background-color: rgba(0, 0, 0, 0.7);

  ${ModalWindow} {
    background-color: #333333;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50px;
    width: 80vw;
    height: 80vh;

    > * {
      margin-bottom: 25px;
    }

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