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

import { isMobileDevice } from 'config/userAgent'
import { Modal as BaseModal } from 'features/Modal'
import { ButtonSolid } from 'features/Common/Button'
import { ModalWindow } from 'features/Modal/styled'

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

  ${ModalWindow} {
    border-radius: 4px;
    padding: 60px 54px 50px;
    max-width: 700px;

    ${isMobileDevice
    ? css`
        width: calc(100vw - 24px);
        padding: 38px 20px 24px;
        @media screen and (orientation: landscape){
          padding: 20px;
        }
      `
    : ''};
  }
`

export const Wrapper = styled.div``

export const NotificationWrapper = styled.div`
   width: 100%;
`

export const Title = styled.div`
  font-style: normal;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  ${isMobileDevice
    ? css`
        font-size: 20px;
        @media screen and (orientation: landscape){
          font-size: 17px;
          margin-bottom: 20px;
        }  
      }
      `
    : ''};
`

export const Text = styled.p`
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  margin-bottom: 30px;
  ${isMobileDevice
    ? css`
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 20px;
      `
    : ''};
`

export const Button = styled(ButtonSolid)`
  min-width: 134px;
  width: auto;
  height: 50px;
  padding: 0 20px;
  background-color: ${({ theme: { colors } }) => colors.button};
  color: ${({ theme: { colors } }) => colors.white};
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  font-weight: 600;
  font-size: 20px;
  ${isMobileDevice
    ? css`
      height: 50px;
      width: 100%;
      font-size: 12px;
      @media screen and (orientation: landscape){
        max-width: 290px;
      }
    `
    : ''};


`

export const ExclamationInCircle = styled.div`
  width: 88px;
  height: 88px;
  background: url(/images/exclamationInCircle.svg) no-repeat;
  background-size: cover;
  margin: 0 auto 35px;
  ${isMobileDevice
    ? css`
        @media screen and (orientation: landscape){
          width: 40px;
          height: 40px;
          margin: 0 auto 15px;
        }
      `
    : ''};
`
