import { extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import React__default from 'react';
import { StyledLabel } from './StyledFormElements.esm.js';
import { baseFormControlStyles } from '../../styles/index.esm.js';

var StyledRadioButton = React__default.forwardRef(function StyledRadioButton(props, ref) {
  return jsx(React__default.Fragment, null, jsx("input", _extends({
    ref: ref,
    css: styledRadioButtonCss
  }, props, {
    type: "radio"
  })), jsx("span", {
    "aria-hidden": "true",
    css: styledRadioButtonBoxCss
  }));
});
function StyledRadioLabel(props) {
  return jsx(StyledLabel, _extends({
    labelSize: "L",
    css: {
      marginBottom: 0
    }
  }, props));
}
var DOT_SIZE = "8px";
var RADIO_BOX_SIZE = "20px";
var CHECKBOX_VERTICAL_OFFSET_CALC = "(1em - 16px) * 0.5";

var styledRadioButtonCss = function styledRadioButtonCss(theme) {
  return [{
    opacity: 0,
    cursor: "pointer",
    width: RADIO_BOX_SIZE,
    height: RADIO_BOX_SIZE,
    flexShrink: 0,
    margin: 0,
    padding: 0,
    "&:checked + span": {
      color: theme.colors.purple[60]
    },
    "&:checked + span::before": {
      borderColor: theme.colors.purple[60],
      backgroundColor: theme.colors.white
    },
    "&:not(:checked):not(:disabled):hover + span::before": {
      borderColor: theme.colors.purple[40]
    },
    "&:disabled + span": {
      color: theme.colors.grey[10],
      cursor: "not-allowed"
    },
    "&:disabled + span::before": {
      borderColor: theme.colors.grey[30],
      backgroundColor: theme.colors.grey[10],
      cursor: "not-allowed"
    },
    "&[aria-invalid='true'] + span::before": {
      borderWidth: 1
    },
    "&[aria-invalid='true']:not(:checked) + span::before": {
      borderColor: theme.colors.red[60]
    },
    "&:checked:disabled + span": {
      color: theme.colors.grey[40]
    },
    "&:checked:disabled + span > svg": {
      backgroundColor: theme.colors.grey[40]
    },
    "&:focus + span::before": [baseFormControlStyles.focusedStyles(theme), {
      transition: "border-color 0.15s ease-in-out 0s"
    }]
  }];
};

var styledRadioButtonBoxCss = function styledRadioButtonBoxCss(theme) {
  return {
    cursor: "pointer",
    position: "relative",
    left: "-".concat(RADIO_BOX_SIZE),
    pointerEvents: "none",
    color: "transparent",
    transition: "color 0.15s ease-in-out",
    "::before": {
      cursor: "pointer",
      backgroundColor: theme.colors.white,
      border: "2px solid ".concat(theme.colors.grey[30]),
      borderRadius: theme.radii[5],
      content: "\"\"",
      display: "block",
      position: "absolute",
      boxSizing: "border-box",
      height: RADIO_BOX_SIZE,
      width: RADIO_BOX_SIZE,
      top: 0,
      left: 0,
      transform: "translate(0, calc(".concat(CHECKBOX_VERTICAL_OFFSET_CALC, "))")
    },
    "::after": {
      cursor: "pointer",
      backgroundColor: "currentColor",
      borderRadius: theme.radii[5],
      content: "\"\"",
      display: "block",
      boxSizing: "border-box",
      height: DOT_SIZE,
      width: DOT_SIZE,
      position: "absolute",
      top: "calc((100% - ".concat(DOT_SIZE, ") / 2)"),
      left: "calc((".concat(RADIO_BOX_SIZE, " - ").concat(DOT_SIZE, ") / 2)")
    }
  };
};

StyledRadioButton.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledRadioButton"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledRadio.tsx"] = {
    name: "StyledRadioButton",
    docgenInfo: StyledRadioButton.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledRadio.tsx"
  };
}

StyledRadioLabel.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "StyledRadioLabel"
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/form/components/styled-primitives/StyledRadio.tsx"] = {
    name: "StyledRadioLabel",
    docgenInfo: StyledRadioLabel.__docgenInfo,
    path: "src/components/form/components/styled-primitives/StyledRadio.tsx"
  };
}

export { StyledRadioButton, StyledRadioLabel };
//# sourceMappingURL=StyledRadio.esm.js.map
