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.div`
  display: flex;
  margin-right: 10px;
  align-items: baseline;
`

const StyledLabel = styled.withComponent(Label)`
  font-size: 16px;
  &::selection {
    transition: all 250ms cubic-bezier(0.65, 0.05, 0.36, 1);
    background: transparent;
  }
`
const StyledCheckboxIcon = styled.withComponent(CheckBoxIcon)`
  width: rem(24);
  height: rem(24);
`
const SwitchIconWrapper = styled.div`
  display: flex;
  align-items: start;

  #slider-circle {
    transition: all 500ms ease;
  }

  ${props =>
    props &&
    props.isSelected &&
    styled.css`
      color: #0772b4;
    `};
`
const SwitchLabel = styled.withComponent(Label)`
  font-size: 1rem;
  font-weight: 500;
  margin-left: rem(10);
`

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