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 }