import { computed } from 'vue';
import { TinyColor } from '@ctrl/tinycolor';
import '../../../hooks/index.mjs';
import { useDisabled } from '../../../hooks/use-common-props/index.mjs';

function darken(color, amount = 20) {
  return color.mix("#141414", amount).toString();
}
function useButtonCustomStyle(props) {
  const _disabled = useDisabled();
  return computed(() => {
    let styles = {};
    const buttonColor = props.color;
    if (buttonColor) {
      const lighten = (color2, light) => new TinyColor(color2).tint(light * 100).toString();
      const darken2 = (color2, dark) => new TinyColor(color2).darken(dark * 100).toString();
      const darkenBgColor = darken2(buttonColor, 0.1);
      const color = new TinyColor(buttonColor);
      const shadeBgColor = color.shade(20).toString();
      if (props.plain) {
        styles = {
          "--el-button-bg-color": color.tint(90).toString(),
          "--el-button-text-color": buttonColor,
          "--el-button-border-color": buttonColor,
          "--el-button-hover-text-color": "var(--el-color-white)",
          "--el-button-hover-bg-color": buttonColor,
          "--el-button-hover-border-color": buttonColor,
          "--el-button-active-bg-color": shadeBgColor,
          "--el-button-active-text-color": "var(--el-color-white)",
          "--el-button-active-border-color": shadeBgColor,
          "--el-button-disabled-bg-color": lighten(buttonColor, 0.9),
          "--el-button-disabled-border-color": lighten(buttonColor, 0.5),
          "--el-button-disabled-text-color": lighten(buttonColor, 0.5)
        };
      } else if (props.border) {
        styles = {
          "--el-button-bg-color": "var(--el-color-white)",
          "--el-button-text-color": buttonColor,
          "--el-button-border-color": buttonColor,
          "--el-button-hover-text-color": buttonColor,
          "--el-button-hover-bg-color": lighten(buttonColor, 0.9),
          "--el-button-hover-border-color": buttonColor,
          "--el-button-active-text-color": "var(--el-color-white)",
          "--el-button-active-bg-color": buttonColor,
          "--el-button-active-border-color": buttonColor,
          "--el-button-disabled-bg-color": "var(--el-color-white)",
          "--el-button-disabled-border-color": lighten(buttonColor, 0.5),
          "--el-button-disabled-text-color": lighten(buttonColor, 0.5)
        };
      } else {
        const tintBgColor = color.tint(20).toString();
        styles = {
          "--el-button-bg-color": buttonColor,
          "--el-button-text-color": "var(--el-color-white)",
          "--el-button-border-color": buttonColor,
          "--el-button-hover-text-color": "var(--el-color-white)",
          "--el-button-hover-bg-color": tintBgColor,
          "--el-button-hover-border-color": tintBgColor,
          "--el-button-active-text-color": "var(--el-color-white)",
          "--el-button-active-bg-color": darkenBgColor,
          "--el-button-active-border-color": darkenBgColor,
          "--el-button-disabled-bg-color": lighten(buttonColor, 0.5),
          "--el-button-disabled-border-color": lighten(buttonColor, 0.5),
          "--el-button-disabled-text-color": "var(--el-color-white)"
        };
      }
    }
    return styles;
  });
}

export { darken, useButtonCustomStyle };
//# sourceMappingURL=button-custom.mjs.map
