import styled from 'styled-components/macro'

import { devices } from 'config'

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

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

  ${ModalWindow} {
    width: 565px;
    min-height: 310px;
    padding: 20px 35px;
    background-color: #3F3F3F;
    border-radius: 5px;

    @media ${devices.mobile} {
      width: 100vw;
      height: 100vh;
      padding: 0;
      background-color: transparent;
    }
  }
`