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

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

import { Column, InputWrapper } from 'features/Common/Input/styled'

export const Form = styled.div`
  padding-top: 26px;
  min-width: 560px;
  display: flex;
  flex-direction: column;

  ${Column}:first-child ${InputWrapper} {
    margin-top: 0;
  }

  ${InputWrapper} {
    height: 2.4rem;
    margin-top: 0.5rem;


    @media ${devices.tablet} {
      height: 4.6rem;
      margin-top: 1rem;
    }

    ${isMobileDevice
    ? css`
      @media (max-width: 650px){
        height: 40px;
        margin-top: 8px;
        padding-left: 0;
      }
    `
    : ''};
  }

  @media ${devices.tablet} {
    width: 100%;
  }

  ${isMobileDevice
    ? css`
      width: 100%;
      min-width: 100%;
      @media (orientation: landscape){
        padding-top: 0;
        height: auto;
      }
    `
    : ''};
`

export const ButtonWrapper = styled.div`
  display: flex;
  align-items: start;
  margin-top: 1.9rem;
  
  ${isMobileDevice ? css`
    flex-direction: column;
  ` : ''}
`

export const PrivacyPolicyLink = styled.a`
  display: inline-block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 18px;
  color: #FFFFFF;
  text-decoration: underline;
`

export const PrivacyWrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: 1rem
`
