import { PaymentWithBillingAddress } from 'src/forms/views/PaymentWithBillingAddress'

const labelStyles = styled.css`
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-black);
  opacity: 0.5;
`

const BillingAddressForm = styled.withComponent(PaymentWithBillingAddress) `
  margin-top: rem(16);

  .card-first-name, .card-last-name, .card-number, .card-month, .card-expire-year, .card-security-code {
    .input-box-label, .input-box {
      ${labelStyles};
    }
    .input-box {
      background-color: transparent;
      border-color: #dbdee5;
    }
  }

  .checkbox-label {
    ${props => props.hasSinglePayment === true && styled.css `
      display: none;
    `}
  }
`
export { BillingAddressForm }