import { PaymentWithBillingAddress } from '@skava/ui/dist/forms/views/PaymentWithBillingAddress'

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

const BillingAddressForm = styled(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 }