import styled , { StyledComponentClass } from 'styled-components'
import { COLOR_PALETTE } from '../../constants/colors';
import {ICON_CODE} from '../../constants/iconCodes'

import * as React from 'react';

export const CheckBoxLabel = styled.label`
    display: block;
    width: 16px;
    height: 16px;        
    overflow: hidden;
    &: hover {
        cursor: pointer;
    }
    &:after {
        content: '';
        position: absolute;
        border-left: 3px solid ${COLOR_PALETTE.WHITE};
        height: 12px;
        right: -7px;
        top: 0px;
        border-radius: 20px;
    }

`;
export const CheckBoxInput = styled.input`
    display: none;
    &:checked + label {
        background-color: ${COLOR_PALETTE.TRANSPARENT};
        min-width: 100%;
        border-radius: 50%;
        min-height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    &:checked + label:before{
        font-family: 'icomoon' !important;
        speak: none;
        content: "\\${ICON_CODE.CLOSE}";
        
    }
`
export const CheckBoxContainer = styled.div`
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid ${COLOR_PALETTE.BLACK};
`