import { styled } from 'styleh-components'
import {
  ShippingMethodOption,
  DeliveryInstruction,
} from 'abstractions/Checkout'
import { SingleShipping } from 'abstractions/Checkout/GuestUser'
import { ProductItem } from 'abstractions/ProductPieces'

const StyledProductItem = styled(ProductItem) `
  margin-bottom: rem(72);
`
const StyledShippingAddress = styled(SingleShipping) `
  margin-bottom: rem(44);
`
const StyledShippingMethod = ShippingMethodOption

const StyledDeliveryInstruction = styled(DeliveryInstruction) `
  margin-bottom: rem(16);
`

const Wrapper = styled.section `
  position: relative;
`

export {
  StyledProductItem,
  StyledShippingAddress,
  StyledShippingMethod,
  StyledDeliveryInstruction,
  Wrapper,
}