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

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

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

export {
  ExpectedDeliveryText,
  ShippingTypeLabel,
  StyledOptionsWrapper,
  ToggleList,
}