import { styled } from '../../styles';
import { visuallyHidden } from '../../styles/utils';
import { Icon } from '../Icon';

export const Input = styled.input(visuallyHidden);

export const CheckIcon = styled(Icon)(({ theme }) => ({
  display: 'block',
  visibility: 'hidden',
  opacity: 0,
  pointerEvents: 'none',
  margin: 'auto',
  transition: `${theme.transitions.hover.ms}ms`,
}));

export const CheckboxInput = styled.div(({ theme }) => ({
  cursor: 'pointer',
  transition: `${theme.transitions.hover.ms}ms`,
  boxSizing: 'border-box',
  border: `2px solid ${theme.colors.gray[3]}`,
  width: '1.125rem',
  height: '1.125rem',
  backgroundColor: '#fff',
  userSelect: 'none',

  [`${Input}:focus + &`]: {
    borderColor: theme.colors.primary,
  },

  [`${Input}:checked:focus + &`]: {
    borderColor: theme.colors.primary,
  },

  [`${Input}:checked + &`]: {
    backgroundColor: theme.colors.primary,
    borderColor: theme.colors.primary,
  },

  [`${Input}:checked + & ${CheckIcon}`]: {
    visibility: 'visible',
    opacity: 1,
  },
}));
