import styled from 'styled-components'
import { Paragraph } from 'components/Typography'
import { Steps } from 'components/Steps'
import { Form } from 'antd'
import { Button } from 'components/Button'

export const StyledContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 25px 40px 58px 40px;
  align-items: center;

  ${props => props.theme.breakpoints.down('s')} {
    padding: 15px 0 58px 0;
  }
`

export const StyledMain = styled.div`
  width: 100%;
  max-width: 512px;

  ${props => props.theme.breakpoints.down('s')} {
    max-width: 100%;
  }
`

export const StyledStepItemContainer = styled.div`
  ${props => props.theme.breakpoints.down('s')} {
    padding: 0 16px 16px;
  }
`

export const StyledSteps = styled(Steps)`
  margin-bottom: 13px;

  ${props => props.theme.breakpoints.up('s')} {
    margin-left: -37px;
    width: calc(100% + 37px);
    margin-bottom: 75px;
  }
`
export const StyledBar = styled.div`
  height: 5px;
  margin-bottom: 22px;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    height: 5px;
    width: 134px;
    background: #000022;
    border-radius: 5px;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }
`



export const StyledParagraph = styled(Paragraph)`
  margin-bottom: 40px !important;

  ${props => props.theme.breakpoints.down('s')} {
    margin-bottom: 6px !important;
  }
`

export const StyledAccountWrap = styled.div`
  padding-top: 10px
`

export const StyledAccountForm = styled(Form)`
  margin-top: 37px;

  ${props => props.theme.breakpoints.down('s')} {
    margin-top: 32px;
  }

  .ant-form-item-required {
    width: 100%;
  }
`
export const StyledHelp = styled.div`
  padding: 0;
  color: #1E1D1F;
  font-size: 10px;
  line-height: 14px;
`

export const StyledSubmitButton = styled(Button)`
  width: 358px;

  ${props => props.theme.breakpoints.down('s')} {
    width: 100%;

  }
`
