import { ShippingAddressOption } from 'abstractions/Checkout/ShippingAddressOption'
import { Name } from 'molecules/PhysicalAddress'
import {
  ToggleItemWrapper,
} from 'molecules/ToggleList'
import { StyledCircleFillPath } from 'atoms/Icons/RadioIcon'

const ShippingAddressOptionPlaceholder = styled.withComponent(ShippingAddressOption)`
  ${ToggleItemWrapper} {
    line-height: rem(22);
    .svg-icon-radio.radio
    {
      margin-right: rem(20);
    }
    ${StyledCircleFillPath}{
      fill: #169fd6;
      stroke: none;
    }
  }
  ${Name}{
    font-weight: 700;
  }
`

export {
  ShippingAddressOptionPlaceholder,
}