import { styled } from 'styleh-components'
import { Heading, StyledBaseText } from '@skava/ui/dist/components/atoms/Text'
import { ButtonText } from '@skava/ui/dist/components/atoms/Button'
import { GhostButton } from 'presets/Buttons'

const SignInHeading = styled(Heading) `
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
`
const StyledText = StyledBaseText.as('span')
const CreateAccountLabel = styled(StyledText) `
  font-size: rem(14);
  color: var(--color-black);
  font-weight: 400;
`

const CreateAccountButton = styled(GhostButton) `
  border: 1px solid var(--color-dark-grey);
  margin-top: rem(16);
  ${ButtonText} {
    color: var(--color-dark-grey);
    font-size: rem(18);
    text-transform: none;
  }
`
const SignInFormWrapper = styled.div ``

export {
  SignInHeading,
  CreateAccountLabel,
  CreateAccountButton,
  SignInFormWrapper,
}