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

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

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

import { client } from '../../config/clients/index'

export const Modal = styled(BaseModal)`
  ${ModalWindow} {
    min-height: 220px;

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

export const ScHeaderTitle = styled(HeaderTitle)`
  text-align: center;

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

export const ScBody = styled(Body)`
  padding: 25px 16px 0 16px;
`

export const ScText = styled.span`
  text-align: center;
  margin-bottom: 20px;

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

export const ScApplyButton = styled(ApplyButton)`
  margin: 0;

  ${isMobileDevice
    ? css`
        font-size: 14px;
      `
    : ''};
  ${client.styles.popupApplyButton}
`

export const ScLink = styled.a`
  color: ${({ theme }) => theme.colors.white};
  text-decoration: underline;
  margin-left: 6px;
`