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

const PaymentAddNewCardTitle = styled.withComponent(Heading)`
  font-family: arial;
  font-weight: 600;
  font-size: 24px;
  margin: auto;

  @media(max-width: 767px) {
    font-size: 20px;
  }
`

const AddNewCardButton = styled.withComponent(PrimaryButton)`
  width: 162px;
  height: 44px;
  border-radius: 4px;
  padding: 0 10px;
  ${ButtonLabel} {
    margin: 0;
  }

  @media(max-width: 767px) {
    width: 100%;
    ${ButtonLabel} {
      display: none;
    }
    &:after {
      content: '+';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 28px;
      text-align: center;
      font-weight: 700;
      background: #5c79bb;
      color: #fff;
    }
  }
`

export { PaymentAddNewCardTitle, AddNewCardButton }