import styled from 'styled-components/macro'

import { devices } from 'config/devices'

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: 1222px;
    padding: 20px 0;
    background-color: #3F3F3F;
    border-radius: 5px;

    @media ${devices.tablet} {
      width: 100vw;
    }

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