import { th } from '@pubsweet/ui'
import styled from 'styled-components'

export const RootContainer = styled.div`
  background-color: ${th('backgroundColorReverse')};
  border: ${th('borderDefault')};
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 550px;
  min-width: 300px;
  padding: 20px;
`

export const Title = styled.div`
  color: ${th('colorPrimary')};
  font-family: ${th('fontHeading')};
  font-size: ${th('fontSizeHeading5')};
  font-weight: bold;
  margin: 10px auto;
  text-align: center;
`
export const Subtitle = styled.div`
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBase')};
  font-weight: normal;
  margin: 10px auto;
  text-align: center;
`

export const Email = styled.div`
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBase')};
  font-weight: normal;
  margin: 10px auto;
  text-align: center;
`

export const FormContainer = styled.form``

export const Row = styled.div`
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: ${th('gridUnit')} 0;
`

export const RowItem = styled.div`
  flex: 1;
  margin-right: ${th('gridUnit')};
`

export const Label = styled.div`
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBaseSmall')};
  text-transform: uppercase;
`
export const Err = styled.span`
  color: ${th('colorError')};
  font-family: ${th('fontReading')};
  font-size: ${th('fontSizeBase')};
  margin-top: calc(${th('gridUnit')}*-1);
  text-align: center;
`