"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../../../../../vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js");
const index_cssr = require("./styles/index.cssr.js");
const useTheme = require("../../_mixins/use-theme.js");
const useConfig = require("../../_mixins/use-config.js");
const useCssVarsClass = require("../../_mixins/use-css-vars-class.js");
const formatLength = require("../../_utils/css/format-length.js");
const warn = require("../../_utils/naive/warn.js");
const light = require("../styles/light.js");
const runtimeCore_esmBundler = require("../../../../../../@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js");
const iconProps = Object.assign(Object.assign({}, useTheme.default.props), { depth: [String, Number], size: [Number, String], color: String, component: Object });
const NIcon = runtimeCore_esmBundler.defineComponent({
  _n_icon__: true,
  name: "Icon",
  inheritAttrs: false,
  props: iconProps,
  setup(props) {
    const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig.default(props);
    const themeRef = useTheme.default("Icon", "-icon", index_cssr.default, light.default, props, mergedClsPrefixRef);
    const cssVarsRef = runtimeCore_esmBundler.computed(() => {
      const { depth } = props;
      const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
      if (depth !== void 0) {
        const { color, [`opacity${depth}Depth`]: opacity } = self;
        return {
          "--n-bezier": cubicBezierEaseInOut,
          "--n-color": color,
          "--n-opacity": opacity
        };
      }
      return {
        "--n-bezier": cubicBezierEaseInOut,
        "--n-color": "",
        "--n-opacity": ""
      };
    });
    const themeClassHandle = inlineThemeDisabled ? useCssVarsClass.useThemeClass("icon", runtimeCore_esmBundler.computed(() => `${props.depth || "d"}`), cssVarsRef, props) : void 0;
    return {
      mergedClsPrefix: mergedClsPrefixRef,
      mergedStyle: runtimeCore_esmBundler.computed(() => {
        const { size, color } = props;
        return {
          fontSize: formatLength.formatLength(size),
          color
        };
      }),
      cssVars: inlineThemeDisabled ? void 0 : cssVarsRef,
      themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
    };
  },
  render() {
    var _a;
    const { $parent, depth, mergedClsPrefix, component, onRender, themeClass } = this;
    if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
      warn.warn("icon", "don't wrap `n-icon` inside `n-icon`");
    }
    onRender === null || onRender === void 0 ? void 0 : onRender();
    return runtimeCore_esmBundler.h("i", runtimeCore_esmBundler.mergeProps(this.$attrs, {
      role: "img",
      class: [
        `${mergedClsPrefix}-icon`,
        themeClass,
        {
          [`${mergedClsPrefix}-icon--depth`]: depth,
          [`${mergedClsPrefix}-icon--color-transition`]: depth !== void 0
        }
      ],
      style: [this.cssVars, this.mergedStyle]
    }), component ? runtimeCore_esmBundler.h(component) : this.$slots);
  }
});
exports.NIcon = NIcon;
exports.iconProps = iconProps;
