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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
export var RadioInput = (_ref) => {
  var {
    isChecked,
    label,
    onChange,
    name,
    value
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, {
    onClick: () => onChange(value)
  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(Input, {
    type: "radio",
    name: name
  }), /*#__PURE__*/React.createElement(Span, {
    isChecked: isChecked
  }), label));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin-bottom: 1rem;\n  word-break: break-all;\n\n  &:hover {\n    opacity: 0.7;\n  }\n"])));
var Label = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var Input = styled.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
var Span = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, props => props.isChecked ? 1 : 0);
//# sourceMappingURL=index.js.map