checkbox

const Checkbox = styled.div`
  width: 36px;
  height: 36px;
  border-radius: 6px;
  transition: all 150ms;
  border: ${colors.darkgrayFaded} solid 1px;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  &::after {
    content: ' ';
    display: inline-block;
    border-radius: 4px;
    height: ${props => (props.checked ? '18px' : '0px')};
    width: ${props => (props.checked ? '18px' : '0px')};
    background-color: ${colors.yellow};
    transition: all cubic-bezier(0.175, 0.985, 0.32, 1.275) 0.25s;
  }
`;