import { styled } from 'view-container'
import Label from 'atoms/Text/Label'
import CheckboxIcon from 'atoms/Icons/CheckBoxIcon'

/**
 * @todo this was styled.li
 * - but we need li + <label>
 * - to be semantic + accessible
 */
const ToggleItemWrapper = styled.withComponent(Label).qa('qa-facet') `
  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) ``

const StyledCheckboxIcon = styled.withComponent(CheckboxIcon) `
  width: rem(24);
  height: rem(24);
`

export {
  ToggleItemWrapper,
  ToggleItemIconWrapper,
  ToggleItemLabel,
  StyledCheckboxIcon,
}