import styled from 'styled-components/macro'

import { Card, CardPage, FadeInFromTop, primaryColor } from '../../styles'

export const ChangePasswordStyled = styled.div``

export const ChangePasswordCard = styled.div`
  max-width: 370px;
  margin: 44px auto 0;
  padding: 0 20px;

  @media (max-width: 998px) {
    margin: 28px auto 0;
  }
`
export const ChangePasswordSeparator = styled.div`
  height: 10px;
`

export const Row = styled.div`
  margin-top: 20px;

  @media (max-width: 1200px) {
    margin-top: 19px;
  }
`

export const ChangePasswordTitle = styled(FadeInFromTop)`
  margin-top: 70px;
  font-size: 48px;
  line-height: 58px;
  font-weight: bold;
  text-align: center;
  color: white;

  h1 {
    margin: 0;
  }

  @media (max-width: 998px) {
    margin-top: 35px;
  }

`

export const ChangePasswordSignUp = styled.div`
  margin-top: 10px;
  text-align: center;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;

  > a {
    color: ${primaryColor} !important;
  }
`

export const BtnContainer = styled.div`
  margin-top: 43px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;

  @media (max-width: 1200px) {
    margin-top: 43px;
  }

  button {
    width: 185px;
    height: 62px;
  }
`

{'avg_line_length': 17.24, 'max_line_length': 74, 'alphanum_fraction': 0.6635730858468677, 'licenses': ['MIT'], 'repository_name': 'Maxvyr/near.academy', 'path': 'src/frontend/src/pages/ChangePassword/ChangePassword.style.tsx', 'size': 1293, 'lang': 'TypeScript'}