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

const Wrapper = styled.div`
  display: flex;
  align-items: center;
`

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

const StyledLabel = styled.withComponent(Label)`
  font-size: 16px;
  &::selection {
    background: transparent;
  }
`
const StyledCheckboxIcon = styled.withComponent(CheckBoxIcon)`
  width: rem(24);
  height: rem(24);
`
const SwitchIconWrapper = styled.span`
  display: flex;
  align-items: start;

  &.Selected {
    color: #0772B4;
  }
`
const SwitchLabel = styled.withComponent(Label)`
  font-size: 1rem;
  font-weight: 500;
  margin-left: rem(10);
`

export { Wrapper, IconWrapper, StyledLabel, StyledCheckboxIcon, SwitchIconWrapper, SwitchLabel }