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

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

import { isMobileDevice } from 'config/userAgent'

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

  ${ModalWindow} {
    position: relative;
    background-color: transparent;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 50px;
    width: 80vw;
    height: 80vh;

    > * {
      margin-bottom: 25px;
    }

    ${isMobileDevice
    ? css`
      width: calc(100vw - 60px);
      @media screen and (orientation: landscape){
        max-width: calc(100vw - 80px);
        height: calc(100vh - 20px);
        overflow: auto;
      }
    `
    : ''};
  }
`

export const ScCloseButton = styled.div`
  position: absolute;
  width: 30px;
  height: 30px;
  right: -40px;
  top: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 21px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  ${isMobileDevice
    ? css`
      right: 0;
      top: 170px;
    `
    : ''};
`
