import styled from 'styled-components';

import ApoliticalBrand from '../../../Theme/ApoliticalBrand';
import Atom from '../../Atom';
import { maxWidth } from '../../../Theme/Vars';

const { color } = ApoliticalBrand;
const { Button, InputField } = Atom;

export const SignUpFormBody = styled.form`
  padding: 40px 30px;
  width: calc(100% - 60px);
  margin: 0 auto;
  max-width: 550px;
  @media only screen and (min-width: ${maxWidth}) {
    max-width: 310px;
  }
`;

export const Input = styled(InputField)`
  > input {    
    width: calc(100% - 34px);
    border: solid 1px ${color.coolGrey};
    ::placeholder {
      font-size: 1.6rem;
      font-weight: 300;
      color: ${color.paleGreyThree60Pct};
    }
  }
`;

export const Subheading = styled.p`
  color: ${color.coolGrey};
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.14px;
  font-style: italic;
  padding-top: 4px;
  text-transform: none;
`;

export const CheckboxWrapper = styled.div`
  display: flex;
`;

export const CheckboxInput = styled.input`
  width: 20px;
  height: 20px;
  border-radius: 4px;
  transform: scale(1.1);
  margin: -4px 10px 0px 0px;
`;

export const CheckWrapper = styled.div`
  display: flex;
  flex-direction: column;
  width: calc(100% - 14px);
`;

export const CheckBoxDescription = styled.p`
  font-size: 1.2rem;
  color: ${color.charcoal};
  font-weight: 300;
  letter-spacing: 0.11px;
  width: 100%;
`;

export const SubTerms = styled.p`
  font-size: 1.2rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.12px;
  color: ${color.coolGrey};
  width: 100%;
  margin: 4px 0px 10px;
`;

export const SignUpButtonWrapper = styled.div`
  margin-top: 30px;
`;


export const LogInQuestion = styled.div`
  text-align: center;
  margin: 4rem auto 0;
  font-size: 1.6rem;
  color: ${color.gunmetal};
  font-weight: 300;
  letter-spacing: 0.16px;
`;

export const LogInAnswer = styled(Button)`
  display: block;
  width: 100px;
  margin: 16px auto 0px;
`;

export const ValidationButton = styled.button`
  display: none;
`;

export const SignupErrorText = styled.div`
  color: ${color.cerise};
  font-size: 15px;
  margin-top: 15px;
`;

export const SubmittingFormText = styled.p`
  font-size: 2rem;
  color: ${color.gunmetal};
  font-weight: 300;
  letter-spacing: 0.16px;
  padding-right: 10px;
  text-align: center;
`;

export const StyledButton = styled(Button)`
  width: 100%;
`;

export const Link = styled.a`
  color: ${color.purple};
  padding-left: 5px;
  padding-right: 5px;
`;