import { styled } from 'styleh-components'
import { Label } from 'atoms/Text'
import { ShippingAddress } from 'src/forms/views/ShippingAddress'
import { ShippingAddressOption } from '../ShippingAddressOption'

const StyledSingleShipping = styled.withComponent(ShippingAddress)`
  margin-top: rem(20);
`

const StyledShippingMethodOption = styled.withComponent(ShippingAddressOption)`
  margin-top: rem(20);
`
const StyledLabel = styled.withComponent(Label)`
  text-transform: capitalize;
  color: #2C2C2C;
  font-weight: 700;
  cursor: pointer;

  ${props => props.isExpanded && styled.css`
    color: #159fd5;
  `}
`

export { StyledSingleShipping, StyledShippingMethodOption, StyledLabel }