import styled from 'styled-components/macro'

import { devices } from 'config/devices'

import { CloseButton } from 'features/Common/CloseButton'

export const ModalContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: white;
  font-weight: 600;
`
export const ModalWindow = styled.div`
  background-color: #313131;
  position: relative;
  padding: 15px;
  box-shadow: 0px 5px 30px rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  
  @media ${devices.mobile} {
    height: 100vh;
    width: 100vw;
    border-radius: 0;
  }
  
`

export const ModalCloseButton = styled(CloseButton)`
  margin-right: 19px;
  margin-top: 16px;
  width: 16px;
  height: 16px;
  cursor: pointer;
`