"use strict";

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

exports.__esModule = true;
exports.CheckboxSlider = void 0;

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

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var CheckboxSlider = function CheckboxSlider(_ref) {
  var isChecked = _ref.isChecked,
      onChange = _ref.onChange;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Label, {
    tabIndex: "0",
    onClick: onChange
  }, /*#__PURE__*/_react["default"].createElement(Input, {
    type: "checkbox"
  }), /*#__PURE__*/_react["default"].createElement(Span, {
    isChecked: isChecked
  })));
};

exports.CheckboxSlider = CheckboxSlider;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  word-break: break-all;\n  box-sizing: border-box;\n  user-select: none;\n"])));

var Label = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  display: inline-block;\n  width: 50px;\n  height: 20px;\n"])));

var Input = _styledComponents["default"].input(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: 0;\n  width: 0;\n  height: 0;\n"])));

var Span = _styledComponents["default"].span.attrs(function (props) {
  return {
    className: props.size === 'tiny' ? 'mr-2' : 'mr-3'
  };
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n  border-radius: 34px;\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 4px;\n    bottom: 4px;\n    background-color: ", ";\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border-radius: 50%;\n  }\n  ", ";\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isChecked && "\n  background-color: " + props.theme.palette.primary + ";\n\n  &:before {\n    -webkit-transform: translateX(15px);\n  -ms-transform: translateX(15px);\n  transform: translateX(15px);\n  background-color: " + props.theme.palette.secondary + ";\n  };\n  ";
});
//# sourceMappingURL=index.js.map