"use strict";

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

exports.__esModule = true;
exports.RadioInput = 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 RadioInput = function RadioInput(_ref) {
  var isChecked = _ref.isChecked,
      label = _ref.label,
      onChange = _ref.onChange,
      name = _ref.name,
      value = _ref.value;
  return /*#__PURE__*/_react["default"].createElement(Container, {
    onClick: function onClick() {
      return onChange(value);
    }
  }, /*#__PURE__*/_react["default"].createElement(Label, null, /*#__PURE__*/_react["default"].createElement(Input, {
    type: "radio",
    name: name
  }), /*#__PURE__*/_react["default"].createElement(Span, {
    isChecked: isChecked
  }), label));
};

exports.RadioInput = RadioInput;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-bottom: 1rem;\n  word-break: break-all;\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])));

var Label = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.6rem;\n  cursor: pointer;\n  position: relative;\n  padding-top: 1px;\n  padding-left: 4rem;\n  width: 100%;\n  color: ", ";\n  font-weight: 500;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

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

var Span = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 2.8rem;\n  width: 2.8rem;\n  border: 3px solid ", ";\n  border-radius: 50%;\n  display: inline-block;\n  position: absolute;\n  left: 0px;\n  top: 0.2rem;\n\n  ::after {\n    content: '';\n    display: block;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 50%;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background-color: ", ";\n    opacity: ", ";\n    transition: opacity 0.2s ease 0s;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.primary;
}, function (props) {
  return props.isChecked ? 1 : 0;
});
//# sourceMappingURL=index.js.map