import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';

var style = ":host {\n}\n\n.empty-ratings {\n  padding: 0;\n  display: block;\n  z-index: 0;\n}\n\n.star-ratings {\n  padding: 6px 2px;\n  unicode-bidi: bidi-override;\n  color:RGBA(224, 224, 224, 1);\n  position: relative;\n  margin: 0;\n  letter-spacing: 4px;\n  padding: 0;\n}\n\n.fill-ratings {\n  color: RGBA(247, 199, 69, 1);\n  padding: 0;\n  position: absolute;\n  z-index: 1;\n  display: block;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n}\n\nspan {\n  display: inline-block;\n}\n";

function KunRating(props) {
  const stylesheet = `
    ${style}
    
    .star-ratings {
      width: 140px;
      font-size: 24px
    }
    .fill-ratings {
      width: ${props.needlePercentage}px;
    }
    `;
  return h("host", null, h("style", null, stylesheet), h("div", {
    className: "star-ratings"
  }, h("div", {
    className: "fill-ratings"
  }, h("span", null, "\u2605\u2605\u2605\u2605\u2605")), h("div", {
    className: "empty-ratings"
  }, h("span", null, "\u2605\u2605\u2605\u2605\u2605"))));
}
KunRating.props = {
  needlePercentage: {
    type: Number,
    value: 50
  }
};
var kunRating = getComponentOrDefine("kun-rating", KunRating);

export default kunRating;
export { KunRating };
//# sourceMappingURL=kun-rating.js.map
