import styled from 'styled-components/macro'

import { devices } from 'config'

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

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

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

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

export const Button = styled(ButtonSolid)`
  min-width: 142px;
  width: auto;
  height: 50px;
  padding: 0 20px;
  background-color: #294FC4;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;

  :disabled {
    opacity: 0.5;
  }
`