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

const StyledButton = styled(PrimaryButton) `
  background-color: var(--color-blue);
  width: rem(262);
  height: rem(44);
  font-weight: 500;

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

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

const StyledHeading = styled(Heading) `
  text-transform: capitalize;
  margin: 0;
  font-weight: 500;
  color: var(--color-black);

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

export { StyledHeading, StyledButton }