import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { useState } from "react";
import classnames from "classnames"; // import useTheme from "../../hooks/useTheme";

import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Rating = props => {
  const {
    children,
    className,
    initialValue = 0,
    onChange = () => {},
    readOnly = false,
    size = "medium",
    ...otherProps
  } = props;
  const [value, setValue] = useState(initialValue);

  const handleClick = value => {
    if (readOnly) return;
    setValue(value);
    onChange(value);
  };

  function handleSizeWidth() {
    switch (size) {
      case "xlarge":
        return 55;

      case "large":
        return 40;

      case "small":
        return 20;

      case "mini":
        return 15;

      case "medium":
      default:
        return 30;
    }
  }

  function handleSizeHeight() {
    switch (size) {
      case "xlarge":
        return 48;

      case "large":
        return 35;

      case "small":
        return 17;

      case "mini":
        return 13;

      case "medium":
      default:
        return 26;
    }
  }

  function handleSizeHalf() {
    switch (size) {
      case "xlarge":
        return 26;

      case "large":
        return 19;

      case "small":
        return 9;

      case "mini":
        return 7;

      case "medium":
      default:
        return 14;
    }
  }

  function handleHover() {
    if (readOnly) return "";
    return `opacity: 1;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3ESolid%20Star%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23FEC844%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");`;
  }

  function handleHoverActive() {
    if (readOnly) return "";
    return `opacity: 1;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3ESolid%20Star%20%E2%80%93%20Light%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23FFE39C%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");`;
  }

  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-Rating",
    ...otherProps,
    className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Rating", className) || ""),
    children: [/*#__PURE__*/_jsxs("div", {
      className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl",
      children: [/*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-5",
        name: "rating",
        value: "5",
        checked: value === 5,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(5),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--5",
        children: "5"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-45",
        name: "rating",
        value: "4.5",
        checked: value === 4.5,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(4.5),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--45 ratingControl-stars--half",
        children: "45"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-4",
        name: "rating",
        value: "4",
        checked: value === 4,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(4),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--4",
        children: "4"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-35",
        name: "rating",
        value: "3.5",
        checked: value === 3.5,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(3.5),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--35 ratingControl-stars--half",
        children: "35"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-3",
        name: "rating",
        value: "3",
        checked: value === 3,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(3),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--3",
        children: "3"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-25",
        name: "rating",
        value: "2.5",
        checked: value === 2.5,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(2.5),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--25 ratingControl-stars--half",
        children: "2.5"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-2",
        name: "rating",
        value: "2",
        checked: value === 2,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(2),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--2",
        children: "2"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-15",
        name: "rating",
        value: "1.5",
        checked: value === 1.5,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(1.5),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--15 ratingControl-stars--half",
        children: "1.5"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-1",
        name: "rating",
        value: "1",
        checked: value === 1,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(1),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--1",
        children: "1"
      }), /*#__PURE__*/_jsx("input", {
        type: "checkbox",
        id: "rating-05",
        name: "rating",
        value: "0.5",
        checked: value === 0.5,
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]])
      }), /*#__PURE__*/_jsx("label", {
        onClick: () => handleClick(0.5),
        className: _JSXStyle.dynamic([["1202948516", [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()]]]) + " " + "ratingControl-stars ratingControl-stars--05 ratingControl-stars--half",
        children: "0.5"
      })]
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "1202948516",
      dynamic: [handleSizeWidth() * 5, handleSizeHeight(), handleSizeWidth(), handleSizeHeight(), handleSizeHeight(), readOnly ? "auto" : "pointer", handleHover(), handleHoverActive(), handleSizeWidth() * 0, handleSizeWidth() * 0, handleSizeWidth() * 1, handleSizeWidth() * 1, handleSizeWidth() * 2, handleSizeWidth() * 2, handleSizeWidth() * 3, handleSizeWidth() * 3, handleSizeWidth() * 4, handleSizeWidth() * 4, handleSizeHalf()],
      children: `@import url(https://fonts.googleapis.com/css?family=Francois+One);@import url(https://fonts.googleapis.com/css?family=PT+Sans);.Wps-Rating.__jsx-style-dynamic-selector{color:black;}.ratingControl.__jsx-style-dynamic-selector{position:relative;width:${handleSizeWidth() * 5}px;height:${handleSizeHeight()}px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0 auto;}.ratingControl.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{visibility:hidden;}.ratingControl-stars.__jsx-style-dynamic-selector{position:absolute;top:0;width:${handleSizeWidth()}px;height:${handleSizeHeight()}px;background-image:url("data:image/svg+xml;	charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3EEmpty%20Star%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23D5D5D5%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");background-size:auto ${handleSizeHeight()}px;background-repeat:no-repeat;cursor:${readOnly ? "auto" : "pointer"};text-indent:100%;white-space:nowrap;overflow:hidden;opacity:0.4;}.ratingControl-stars.__jsx-style-dynamic-selector:hover,.ratingControl-stars.__jsx-style-dynamic-selector:hover~.ratingControl-stars.__jsx-style-dynamic-selector{${handleHover()};}input.__jsx-style-dynamic-selector:checked~.ratingControl-stars.__jsx-style-dynamic-selector{opacity:1;background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3Csvg%20width%3D%2215px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2015%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%20%20%20%20%3Ctitle%3ESolid%20Star%3C%2Ftitle%3E%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Order-Details---Order-final---Not-reviewed%22%20transform%3D%22translate%28-108.000000%2C%20-385.000000%29%22%20fill%3D%22%23FEC844%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate%28108.000000%2C%20316.000000%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22translate%280.000000%2C%2069.000000%29%22%20id%3D%22Star-7%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20points%3D%227.5%2011.25%203.09161061%2013.5676275%203.93353806%208.65881373%200.367076128%205.18237254%205.2958053%204.46618627%207.5%200%209.7041947%204.46618627%2014.6329239%205.18237254%2011.0664619%208.65881373%2011.9083894%2013.5676275%20%22%3E%3C%2Fpolygon%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E");}.ratingControl-stars.__jsx-style-dynamic-selector:active,.ratingControl-stars.__jsx-style-dynamic-selector:active~.ratingControl-stars.__jsx-style-dynamic-selector,input.__jsx-style-dynamic-selector:checked~.ratingControl-stars.__jsx-style-dynamic-selector:active{${handleHoverActive()};}.ratingControl-stars--05.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 0}px;}.ratingControl-stars--1.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 0}px;}.ratingControl-stars--15.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 1}px;}.ratingControl-stars--2.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 1}px;}.ratingControl-stars--25.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 2}px;}.ratingControl-stars--3.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 2}px;}.ratingControl-stars--35.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 3}px;}.ratingControl-stars--4.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 3}px;}.ratingControl-stars--45.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 4}px;}.ratingControl-stars--5.__jsx-style-dynamic-selector{left:${handleSizeWidth() * 4}px;}.ratingControl-stars--half.__jsx-style-dynamic-selector{width:${handleSizeHalf()}px;}`
    }), children]
  });
};