import styled from 'styled-components/macro'

import { BlockTitle, Form } from 'features/Login/styled'
import { outlineButtonStyles } from 'features/Common/Button'

export const OutlinedButton = styled.button`
  ${outlineButtonStyles};
  width: 288px;
  margin-top: 20px;
  align-self: flex-start;
  color: white;
  font-weight: bold;
  border-color: #0033CC;
  background-color: #0033CC;

  &:hover {
    cursor: pointer;
  }
`

export const UserAccountFormWrapper = styled.div`
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
`

export const ButtonWrapper = styled.div`
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  align-items: center;
`

export const UserAccountWrapper = styled.div`
  width: 1776px;
  margin-top: 140px;
`

export const UserAccountBlockTitle = styled(BlockTitle)`
  align-self: flex-start;
`

export const UserAccountComponentWrapper = styled.div``

export const FormWrapper = styled.div`
  margin-right: 48px;

  ${Form} {
    width: 560px;
  }
  
  &:last-child {
    margin-right: 0;
  }
`