import { styled } from 'styleh-components'
import { Label } from 'atoms/Text/Label'
import { Header, ToggleItemIconWrapper } from 'molecules/ToggleList'
import {
  OptionsWrapper,
  ShippingMethodOption,
} from 'abstractions/Checkout/ShippingMethodOption'

const ToggleList = styled.withComponent(ShippingMethodOption)`
  ${Header} {
    font-size: rem(18);
  }
  ${ToggleItemIconWrapper} {
    align-self: baseline;
    margin-right: rem(20);
  }
`

const ShippingTypeLabel = styled.withComponent(Label)`
  font-weight: 500;
  margin-bottom: rem(4);
`
const ExpectedDeliveryText = styled.span`
  color: #65738e;
`
const StyledOptionsWrapper = styled.withComponent(OptionsWrapper)`
  display: flex;
  flex-direction: column;
  margin-bottom: rem(8);
`

export {
  ExpectedDeliveryText,
  ShippingTypeLabel,
  StyledOptionsWrapper,
  ToggleList,
}