import { styled } from 'uxui-modules/view-container'
import { TextPlaceholder } from 'atoms/Placeholder'

const Wrapper = styled.section`
  position: relative;
  flex
`
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: 20px;
  width: 40%;
`
const Checkbox = styled.div`
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin-bottom: 20px;
`

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

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