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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
export var CheckboxSlider = (_ref) => {
  var {
    isChecked,
    onChange
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Label, {
    tabIndex: "0",
    onClick: onChange
  }, /*#__PURE__*/React.createElement(Input, {
    type: "checkbox"
  }), /*#__PURE__*/React.createElement(Span, {
    isChecked: isChecked
  })));
};
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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  width: 50px;\n  height: 20px;\n"])));
var Input = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  width: 0;\n  height: 0;\n"])));
var Span = styled.span.attrs(props => ({
  className: props.size === 'tiny' ? 'mr-2' : 'mr-3'
}))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, props => 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