import { styled } from 'styleh-components'
import { Heading } from 'atoms/Text'
import { ButtonLabel } from 'atoms/Button'
import { PrimaryButton } from 'presets/Buttons'

const StyledButton = styled.withComponent(PrimaryButton)`
  background-color: #1b75bc;
  width: rem(262);
  height: rem(44);
  font-weight: 500;

  ${ButtonLabel} {
    font-size: rem(18);
  }

  @tablet-or-smaller() {
    width: rem(275)
  }
  @phone-or-smaller() {
    width: 100%;
  }
`

const StyledHeading = styled.withComponent(Heading)`
  text-transform: capitalize;
  margin: 0;
  font-weight: 500;
  color: #2C2C2C;

  @tablet-or-smaller() {
    font-size: rem(20);
  }
`

export { StyledHeading, StyledButton }