import { styled } from 'styleh-components'
import { ShippingAddressOption } from '../ShippingAddressOption'
import { SingleShipping } from '../GuestUser/SingleShipping'

const ToggleHeaderWrapper = styled.div `
  display: flex;
  align-items: center;
  margin-bottom: rem(24);
`
const StyledSeparator = styled.span`
  padding: 0 $spacing;
  @phone-or-smaller() {
    padding: 0 $spacing-small;
  }
`
const StyledShippingAddressOption = styled.withComponent(ShippingAddressOption) `
  margin-top: 20px;
`
const StyledSingleShipping = styled.withComponent(SingleShipping) `
  margin-top: 20px;
`
const SaveAddressWrapper = styled.div `
  cursor: pointer;
  ${props =>
    props.isExpandView &&
    styled.css `
      pointer-events: none;
    `};
`
const AddNewAddressWrapper = styled.div `
  cursor: pointer;
  ${props =>
    props.isExpandView &&
    styled.css `
      pointer-events: none;
    `};
`

export {
  ToggleHeaderWrapper,
  StyledSeparator,
  StyledShippingAddressOption,
  StyledSingleShipping,
  SaveAddressWrapper,
  AddNewAddressWrapper,
}