import { palette , theme } from 'styled-tools' ; import Label from 'reakit/Label' ; import { Box } from '../primitives' ; import styled , { css } from '../styled' ; import HiddenInput from '../_utils/HiddenInput' ; import { LocalCheckboxProps } from './Checkbox' ; export const CheckboxIcon = styled ( Box ) < { state ? : string ; } > `
  -webkit-appearance: none;
  background-color: white;
  border: 1px solid #bdbdbd;
  box-shadow: inset 0px 1px 2px #e5e5e5;
  border-radius: 0.2em;
  height: 1em;
  position: relative;
  margin-top: 0.25em;
  min-width: 1em;
  width: 1em;

  & {
    ${ props => props . state && css `
        border-color: ${ ( props ) => palette ( `${ props . state }` ) ( props ) };
        box-shadow: ${ ( props ) => palette ( `${ props . state }` ) ( props ) } 0px 0px 0px 1px !important;
      ` };
  }

  & {
    ${ theme ( 'fannypack.Checkbox.base' ) };
  }
` ; export const HiddenCheckbox = HiddenInput < LocalCheckboxProps > ( { Icon : CheckboxIcon , checkedIconCss : css < { indeterminate ? : boolean ; } > `
    background-clip: padding-box;
    content: '';
    left: calc(50% - 0.1875em);
    top: calc(50% - 0.375em);
    position: absolute;

    & {
      ${ props => props . indeterminate ? css `
              background-color: ${ palette ( 'primary' ) };
              height: 0.125em;
              width: 0.625em;
              top: calc(50% - 0.0625em);
              left: calc(50% - 0.3125em);
            ` : css `
              border: 0.1em solid ${ palette ( 'primary' ) };
              border-left-width: 0;
              border-top-width: 0;
              height: 0.625em;
              transform: rotate(45deg);
              width: 0.375em;
            ` };
    }
  ` , disabledCheckedIconCss : css `
    border-color: ${ palette ( 'gray300' ) };
  ` , themePrefix : 'Checkbox' } ) ; export const Checkbox = styled ( Label ) `
  display: flex;
  /* align-items: center; */
  align-items: flex-start;

  & {
    ${ theme ( 'fannypack.Checkbox.label' ) };
  }
` ; export default Checkbox ;