"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.CheckboxLabel = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _injectE2E = _interopRequireDefault(require("../../Tools/injectE2E"));

//  strict
var toId = function toId(name) {
  return "".concat(name, "-checkbox");
};

var Wrapper =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "sc-1im73t0-0"
})(["\n  input:checked + label::before {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  input:checked + label::after {\n    opacity: 1;\n    transform: scale(1) rotate(-45deg);\n  }\n"], function (props) {
  return props.theme.inputCheckboxColor;
}, function (props) {
  return props.theme.inputCheckboxColor;
});

var Input =
/*#__PURE__*/
_styledComponents.default.input.attrs({
  'data-e2e': _injectE2E.default,
  id: function id(props) {
    return toId(props.name);
  },
  name: function name(props) {
    return props.name;
  },
  type: 'checkbox'
}).withConfig({
  componentId: "sc-1im73t0-1"
})(["\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  visibility: visible;\n  white-space: nowrap;\n  width: 1px;\n"]);

var CheckboxLabel =
/*#__PURE__*/
_styledComponents.default.label.attrs({
  htmlFor: function htmlFor(props) {
    return toId(props.name);
  }
}).withConfig({
  componentId: "sc-1im73t0-2"
})(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 1rem;\n  padding-left: 1.5rem;\n  cursor: pointer;\n  font-family: ", ";\n  font-size: 1rem;\n\n  &::before {\n    background-color: ", ";\n    border: 2px solid ", ";\n    box-sizing: border-box;\n    content: '';\n    height: 16px;\n    left: 0.05rem;\n    position: absolute;\n    top: calc(50% - 0.5rem);\n    width: 16px;\n  }\n\n  &::after {\n    background: none;\n    border-left: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n    box-sizing: border-box;\n    content: '';\n    height: 5px;\n    left: 0.3125rem;\n    margin-top: -0.1875rem;\n    position: absolute;\n    opacity: 0;\n    top: 50%;\n    transform: scale(0) rotate(-45deg);\n    width: 9px;\n  }\n"], function (props) {
  return props.theme.fontPrimary;
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.inputBorderColor;
}, function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.palette.white;
});

exports.CheckboxLabel = CheckboxLabel;

var Checkbox = function Checkbox(_ref) {
  var input = _ref.input,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["input"]);
  return _react.default.createElement(Wrapper, null, _react.default.createElement(Input, (0, _extends2.default)({}, input, rest)), _react.default.createElement(CheckboxLabel, {
    name: rest.name
  }, rest.label));
};

var _default = Checkbox;
exports.default = _default;