import { palette , theme } from 'styled-tools' ; import Input from 'reakit/Input' ; import styled , { css } from '../styled' ; function HiddenInput < T > ( { Icon , checkedCss , disabledCheckedCss , disabledCheckedIconCss , disabledUncheckedIconCss , checkedIconCss , uncheckedIconCss , themePrefix } ) { return styled ( Input ) < T > `
    -webkit-appearance: none;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;

    & + ${ Icon } {
      &::before {
        ${ uncheckedIconCss };

        & {
          ${ theme ( `fannypack.${ themePrefix }.icon.unchecked` ) };
        }
      }
    }
    &[disabled] + ${ Icon } {
      background-color: ${ palette ( 'white700' ) };
      box-shadow: unset;

      &::before {
        ${ disabledUncheckedIconCss };
        & {
          ${ theme ( `fannypack.${ themePrefix }.icon.uncheckedDisabled` ) };
        }
      }

      & {
        ${ theme ( `fannypack.${ themePrefix }.disabled` ) };
      }
    }
    &:checked:focus + ${ Icon } {
      border-color: ${ ( props ) => palette ( `${ props . palette || 'primary' }` ) };
      box-shadow: ${ ( props ) => palette ( `${ props . palette || 'primary' }` ) } 0px 0px 0px 1px !important;

      & {
        ${ theme ( `fannypack.${ themePrefix }.focusChecked` ) };
      }
    }
    &:focus + ${ Icon } {
      border-color: ${ palette ( 'primary' ) };
      box-shadow: ${ palette ( 'primary' ) } 0px 0px 0px 1px !important;

      & {
        ${ theme ( `fannypack.${ themePrefix }.focus` ) };
      }
    }
    &:not([disabled]):checked + ${ Icon } {
      border-color: ${ ( props ) => palette ( `${ props . palette || 'primary' }` ) };
      ${ checkedCss };
    }
    &:checked + ${ Icon } {
      ${ disabledCheckedCss };

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

      &::before {
        ${ checkedIconCss };
        ${ theme ( `fannypack.${ themePrefix }.icon.checked` ) };
      }

      & {
        ${ theme ( `fannypack.${ themePrefix }.checked` ) };
      }
    }
    &[disabled]:checked + ${ Icon }::before {
      ${ disabledCheckedIconCss };

      & {
        ${ theme ( `fannypack.${ themePrefix }.icon.checkedDisabled` ) };
      }
    }
  ` ; } export default HiddenInput ;