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

import { isMobileDevice } from 'config'

import { T9n } from 'features/T9n'
import { ModalWindow, ModalCloseButton } from 'features/Modal/styled'
import { Header as BaseHeader } from 'features/PopupComponents'
import {
  ApplyButton,
  Modal as BaseModal,
} from 'features/AuthServiceApp/components/RegisterPopup/styled'

export const Modal = styled(BaseModal)`
  
  ${ModalWindow} {
    width: 577px;
    height: 490px;
    padding: 80px 90px 65px;
    min-height: auto;

  ${ModalCloseButton} {
    height: 28px;
    width: 28px;

    svg {
      width: 20px;
      height: 12px;
    }
  }

  ${isMobileDevice
    ? css`
      max-width: 95vw;
      max-height: 75vh;
      top: -3vh;
      padding: 60px 14px 20px;`
    : ''};
`

export const Wrapper = styled.div``

export const Header = styled(BaseHeader)`
  display: flex;
  align-items: center;
  height: 100%;
`

export const DownloadIcon = styled.img`
  margin-right: 25px;

  ${isMobileDevice
    ? css`
      height: 55px;
      width: 44px;`
    : ''};
`

export const HeaderTitle = styled.div`
  display: flex;
  flex-direction: column;
`

export const FirstTitle = styled(T9n)`
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  margin-bottom: 10px;

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

export const SecondTitle = styled(T9n)`
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;

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

export const RadioButtonsWrapper = styled.div`
  margin: 25px 0;
`

export const Label = styled.label`
  display: flex;
  cursor: pointer;
  font-size: 18px;
  line-height: 50px;
  align-items: center;

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

export const Input = styled.input.attrs(() => ({
  type: 'radio',
}))`
  margin: 0 25px 0 0;
  appearance: none;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background-image: url(/images/${({ defaultChecked }) => (
    defaultChecked
      ? 'checkedRadiobutton.png'
      : 'radiobutton.png'
  )});


  ${isMobileDevice
    ? css`
      margin-right: 10px;`
    : ''};

`

export const Footer = styled.div``

export const ScApplyButton = styled(ApplyButton)`
  width: 400px;
  height: 50px;
  margin: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%), #3F3F3F;
  transition: background-color 0.3s;

  :first-child {
    margin-bottom: 20px;
  }
  
  &:hover {
    background-color: ${({ theme: { colors } }) => colors.button};
  }

  :disabled {
    pointer-events: none;
  }

  ${isMobileDevice
    ? css`
      font-size: 14px;
      width: 100%;
      height: 50px;
            
      :first-child {
        margin-bottom: 10px;
      }`
    : ''};
`