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

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

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: 497px;
    height: 470px;

    > * {
      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;
      }
    `
    : ''};
  }
`

export const ScHeader = styled.span`
  font-weight: 700;
  font-size: 28px;
  line-height: 24px;
  text-align: center;
`

export const ScTitle = styled.span`
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  text-align: center;
`

export const ScText = styled.span`
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
`

export const ScButton = styled(ButtonSolid)`
  width: 194px;
  height: 50px;
  min-height: 50px;
  font-weight: 600;
  font-size: 20px;
  line-height: 50px;
`