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

// import { devices } from 'config'
import { isMobileDevice } from 'config/userAgent'

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: 27.22rem;
    min-height: 14.859rem;
    padding: 1.416rem 0.71rem;
    background-color: #333;
    border-radius: 5px;

    ${isMobileDevice
    ? css`
      width: 100vw;
      padding: 0;
    `
    : ''};
  }
  
`
