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

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

import { ModalWindow } from 'features/Modal/styled'
import {
  Body,
  Modal as BaseModal,
} from 'features/AuthServiceApp/components/RegisterPopup/styled'

export const Modal = styled(BaseModal)`
  ${ModalWindow} {
    min-height: 220px;
    padding-top: 0;
    
    display: flex;
    align-items: center;

    ${isMobileDevice
    ? css`
          @media ${devices.mobile} {
            width: 95vw;
            padding-top: 0;
          }
        `
    : ''};
  }
`

export const ScBody = styled(Body)`
`

export const ScText = styled.span`
  text-align: center;

  ${isMobileDevice
    ? css`
        font-size: 14px;
      `
    : ''};
`

type WrapperProps = {
  isFetching?: boolean,
}

export const ScWrapper = styled.div<WrapperProps>`
  ${({ isFetching }) => (
    isFetching
      ? css`pointer-events: none;`
      : ''
  )}
`
