import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { IconCheck } from '../../../../../Common';
export var Checkbox = (_ref) => {
  var {
    isChecked,
    onChange,
    name,
    value,
    children,
    size = 'normal'
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, {
    size: size
  }, /*#__PURE__*/React.createElement(Label, {
    tabIndex: "0",
    onClick: () => onChange(value),
    size: size
  }, /*#__PURE__*/React.createElement(Input, {
    type: "checkbox",
    name: name
  }), /*#__PURE__*/React.createElement(Span, {
    size: size,
    isChecked: isChecked
  }, isChecked && /*#__PURE__*/React.createElement(IconCheck, null)), children));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  word-break: break-all;\n  box-sizing: border-box;\n  user-select: none;\n"])));
var Label = styled.div.attrs({
  className: 'pb-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  font-size: ", ";\n  cursor: pointer;\n  position: relative;\n  height: 100%;\n  color: ", ";\n\n  @media (min-width: ", ") {\n    &:hover {\n      opacity: 0.6;\n    }\n  }\n  word-break: break-word;\n"])), (_ref2) => {
  var {
    size
  } = _ref2;

  if (size === 'tiny') {
    return '1.4rem';
  }

  if (size === 'small') {
    return '1.5rem';
  }

  return '1.6rem';
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.min;
});
var Input = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
var Span = styled.span.attrs(props => ({
  className: props.size === 'tiny' ? 'mr-2' : 'mr-3'
}))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  width: ", ";\n\n  border: 0.2rem solid\n    ", ";\n\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  border-radius: ", ";\n\n  & svg {\n    width: ", ";\n  }\n"])), (_ref5) => {
  var {
    size
  } = _ref5;

  if (size === 'tiny') {
    return '2rem';
  }

  return '2.4rem';
}, (_ref6) => {
  var {
    size
  } = _ref6;

  if (size === 'tiny') {
    return '2rem';
  }

  return '2.4rem';
}, props => {
  if (props.size === 'tiny' && !props.isChecked) {
    return props.theme.palette.light;
  }

  return props.theme.palette.primary;
}, props => props.theme.palette[props.isChecked ? 'primary' : 'secondary'], (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.secondary;
}, (_ref8) => {
  var {
    size
  } = _ref8;

  if (size === 'tiny') {
    return '0.2rem';
  }

  return '0';
}, (_ref9) => {
  var {
    size
  } = _ref9;

  if (size === 'tiny') {
    return '1.4rem';
  }

  return '1.6rem';
});
//# sourceMappingURL=index.js.map