import { styled } from 'styleh-components'
import Label from 'atoms/Text/Label'

/**
 * @todo this was styled.li
 * - but we need li + <label>
 * - to be semantic + accessible
 */
const ToggleItemWrapper = styled.div`
  margin-right: 20px;
  display: flex;
  align-items: center;
`

const ToggleItemIconWrapper = styled.span`
  margin-right: 10px;
  display: flex;
  align-items: center;
`

const ToggleItemLabel = styled.withComponent(Label)``

export { ToggleItemWrapper, ToggleItemIconWrapper, ToggleItemLabel }