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

const StyledHeading = styled.withComponent(Heading) `
  display: inline-block;
  margin-bottom: rem(8);
`

const PendingCount = styled.span.attrs({
  'data-qa': 'qa-pending-value',
}) `
  color: #d2171c;
  ${props =>
    props.zeroPendingCount &&
    styled.css `
      color: #7b879f;
    `}
`

const StyledDescription = styled.withComponent(Paragraph) `
  margin: rem(8) 0 rem(24) 0;
  color:  var(--color-dark-grey);
`

const StyledGhostButton = styled.withComponent(GhostButton) `
  width: rem(200);
  border-color: var(--color-dark-grey);
  ${ButtonLabel} {
    color: var(--color-dark-grey);
    font-weight: 500;
  }

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

export { StyledHeading, PendingCount, StyledDescription, StyledGhostButton }