import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from 'react';
import styled from 'styled-components';
import injectE2E from '../../Tools/injectE2E';
import { fontSize, theme } from '../../Tools/interpolation';

var toId = function toId(name) {
  return "".concat(name != null ? name : '' || '', "-checkbox");
};

var Wrapper =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "sc-1rjvnx3-0"
})(["\n  display: flex;\n"]);
var RadioButton =
/*#__PURE__*/
styled.span.withConfig({
  componentId: "sc-1rjvnx3-1"
})(["\n  margin-right: 0.5rem;\n  background: ", ";\n  border: 2px solid ", ";\n  box-sizing: border-box;\n  border-radius: 50%;\n  height: 16px;\n  width: 16px;\n"], theme('inputBackgroundColor'), theme('inputBorderColor'));
var Input =
/*#__PURE__*/
styled.input.attrs(injectE2E).withConfig({
  componentId: "sc-1rjvnx3-2"
})(["\n  position: absolute;\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  visibility: visible;\n  white-space: nowrap;\n  width: 1px;\n\n  &:focus ~ label ", " {\n    box-shadow: 0 0 0 2px ", ";\n    outline: 1px solid transparent;\n  }\n\n  &:checked ~ label ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-color: ", ";\n\n    &::before {\n      border-radius: 51%;\n      content: '';\n      display: inline-block;\n      height: 8px;\n      width: 8px;\n      position: relative;\n      background: ", ";\n    }\n  }\n"], RadioButton, theme('inputActiveColor'), RadioButton, theme('inputCheckedColor'), theme('inputCheckedColor'));
export var RadioLabel =
/*#__PURE__*/
styled.label.withConfig({
  componentId: "sc-1rjvnx3-3"
})(["\n  position: relative;\n  left: 1px;\n  display: flex;\n  align-items: center;\n  min-height: 1rem;\n  cursor: pointer;\n  font-family: ", ";\n  font-size: ", ";\n"], theme('fontPrimary'), fontSize('md'));

var Radio = function Radio(_ref) {
  var className = _ref.className,
      input = _ref.input,
      rest = _objectWithoutProperties(_ref, ["className", "input"]);

  return React.createElement(Wrapper, {
    className: className
  }, React.createElement(Input, _extends({}, input, rest, {
    id: toId(rest.value),
    type: "radio"
  })), React.createElement(RadioLabel, {
    htmlFor: toId(rest.value)
  }, React.createElement(RadioButton, null), rest.label));
};

export default Radio;