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

import { isMobileDevice } from 'config'

import { ModalWindow } from 'features/Modal/styled'
import {
  ApplyButton,
  Body,
  Modal as BaseModal,
  HeaderTitle,
} from 'features/AuthServiceApp/components/RegisterPopup/styled'
import { Header as BaseHeader } from 'features/PopupComponents'
import { client } from 'features/AuthServiceApp/config/clients/index'

export const Modal = styled(BaseModal)`
  
  
  ${ModalWindow} {
    width: 705px;
    height: 472px;

    padding: 60px 100px;
    min-height: auto;

    ${isMobileDevice
    ? css`
       max-width: 95vw;
       padding: 50px 20px 80px 20px;

       @media screen and (orientation: landscape) {
          max-height: 80vh;
          max-width: 95vw;
          padding: 24px 100px 60px 100px;
        }
        `
    : ''};
  }
`

export const Wrapper = styled.div`
  gap: 30px;

  ${isMobileDevice
    ? css`
       max-height: 80vh;
       gap: 10px;
          `
    : ''};
`

export const ScHeaderTitle = styled(HeaderTitle)`
  text-align: center;
  font-weight: 700;
  font-size: 34px;
  line-height: 34px;

  ${isMobileDevice
    ? css`
        font-size: 20px;
        line-height: 24px;

            @media screen and (orientation: landscape) {
              font-size: 17px;
            }
      `
    : ''};
`

export const ScBody = styled(Body)`
  padding: 16px 0 0 0;
  
  ${isMobileDevice
    ? css`
            @media screen and (orientation: landscape) {
              max-width: 491px;
            }
      `
    : ''};
`

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

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

export const ScApplyButton = styled(ApplyButton)`
  width: 300px;
  height: 60px;
  margin: 0;
  
  ${isMobileDevice
    ? css`
        font-size: 14px;
        margin: 20px 0;
            width: 293px;
            height: 50px;

            @media screen and (orientation: landscape) {
              margin: 0;
              width: 225px;
              height: 44px;
            }
      `
    : ''};
  ${client.styles.popupApplyButton}
`

export const Header = styled(BaseHeader)`
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  justify-content: center;
  gap: 30px;
  ${isMobileDevice
    ? css`
            @media screen and (orientation: landscape) {
              gap: 10px;
              
              svg {
                width: 40px;
                height: 40px;
              }
            }
    `
    : ''};
`

export const Footer = styled.div`
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 33px 0 65px 0;
  
  ${isMobileDevice
    ? css`
      padding-top: 30px;
    `
    : ''};
`
