import { Link } from 'react-router-dom'
import styled from 'styled-components/macro'

import { outlineButtonStyles } from 'features/Common'

export const CenterBlock = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 140px;
`

export const Form = styled.form`
  width: 544px;
  margin: 80px 0 140px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
`

export const BlockTitle = styled.span`
  display: block;
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  line-height: 24px;
  color: ${({ theme: { colors } }) => colors.text};
  margin-bottom: 20px;
  transition: color 0.3s ease-in-out;
`

export const ButtonsBlock = styled.div<{forSubsPage?: boolean}>`
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: ${({ forSubsPage }) => (forSubsPage ? '80px' : '60px')};
  margin-bottom: ${({ forSubsPage }) => (forSubsPage ? '96px' : '')};
  position: relative;
`

export const RegisterButton = styled(Link)`
  ${outlineButtonStyles}
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
`