import { styled } from 'styleh-components'
import { TextPlaceholder } from 'atoms/Placeholder'

const Wrapper = styled.section`
  position: relative;
`
const Form = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;

  .input-box-card {
    width: 69%;
  }
  .input-box-cvv {
    width: 29%;
  }
  .input-box {
    width: 49%;
  }
`
const FormButton = styled.div ``

const Error = styled.div `
  margin-bottom: rem(20);
  width: 40%;
`
const Checkbox = styled.div `
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin-bottom: rem(20);
`

const InputPlaceholder = styled.withComponent(TextPlaceholder) `
  margin-bottom: rem(20);
`

export { Wrapper, Form, FormButton, Error, Checkbox, InputPlaceholder }