import { u as h } from "./jsxRuntime.module.92xvPm7T.js";
import { W as m, K as M, L as e, M as S, N as r, O as k, q as X, z as l, v as y, Q as E, R as Y, x as O, T as C, V as A } from "./index.B_XvPxIW.js";
import { w as g, b as R } from "./colors.5zuHvbyn.js";
import "./VirtualKeyboard.x9bo5ETV.js";
import "./all.Ss8ypuFN.js";
function $(t) {
  let o = t;
  o.startsWith("#") && (o = o.slice(1)), o.length === 3 && (o = o.split("").map((i) => i + i).join(""));
  const n = Number.parseInt(o, 16);
  return {
    r: n >> 16 & 255,
    g: n >> 8 & 255,
    b: n & 255
  };
}
function _(t, o, n) {
  return `#${[t, o, n].map((i) => {
    const s = i.toString(16);
    return s.length === 1 ? `0${s}` : s;
  }).join("")}`;
}
function rt(t, o) {
  const { r: n, g: i, b: s } = $(t), a = Math.round(n * (1 - o) + 255 * o), c = Math.round(i * (1 - o) + 255 * o), p = Math.round(s * (1 - o) + 255 * o);
  return _(a, c, p);
}
function lt(t, o) {
  const { r: n, g: i, b: s } = $(t);
  return `rgba(${n}, ${i}, ${s}, ${o})`;
}
function L(t) {
  const { r: o, g: n, b: i } = $(t);
  return (o + n + i) / 3 > 160;
}
const u = (t, o) => {
  const n = ["r", "c", "l"].includes(t), i = o !== void 0 && o !== 0, s = n ? "c" : "m", a = n ? "translateX" : "translateY";
  if (t === s) {
    if (i) {
      const c = Math.sign(o) === 1 ? "+" : "-";
      return `${a}(calc(-50% ${c} ${Math.abs(o)}px))`;
    }
    return `${a}(-50%)`;
  }
  return i ? `${a}(${o}px)` : "";
}, x = {
  VERTICAL: "vertical",
  HORIZONTAL: "horizontal"
}, T = (t) => t === "c" ? x.VERTICAL : x.HORIZONTAL, w = (t) => {
  const o = {
    t: "13px",
    m: "50%",
    b: "auto"
  }, n = {
    t: "auto",
    m: "50%",
    b: "13px"
  };
  return `
    top: ${o[t]};
    bottom: ${n[t]};
  `;
}, B = (t) => {
  const o = {
    r: "13px",
    c: "50%",
    l: "auto"
  }, n = {
    r: "auto",
    c: "50%",
    l: "13px"
  };
  return `
    right: ${o[t]};
    left: ${n[t]};
  `;
}, v = (t) => {
  const o = u(t.positionX, t.translateX), n = u(t.positionY, t.translateY), i = [o, n].filter(Boolean).join(" "), s = i ? `${i} scale(1.1)` : "scale(1.1)";
  return `
    transform: ${i === "" ? "initial" : i};
    
    &:hover, &:focus-visible, &:active {
      transform: ${s};
    }
  `;
}, z = (t) => t.iconSize >= m.MEDIUM ? `
    top: -1px;
    right: 2px;
    bottom: initial;
    left: initial;

    svg {
      height: 20px;
      width: 20px;
    }
  ` : `
    top: -2px;
    right: -1px;
    bottom: initial;
    left: initial;

    svg {
      height: 16px;
      width: 16px;
    }
  `, d = (t) => ({
  position: `
      ${B(t.positionX)}
      ${w(t.positionY)}
    `,
  positionDirection: T(t.positionX),
  style: `
      width: ${t.iconSize}px;
      height: ${t.iconSize}px;
      ${v(t)}
    `,
  checkMarkPosition: z(t)
}), D = (t, o) => {
  const n = {
    t: o === "c" ? "0" : "13px",
    m: "50%",
    b: "auto"
  }, i = {
    t: "auto",
    m: "50%",
    b: o === "c" ? "0px" : "13px"
  };
  return `
    top: ${n[t]};
    bottom: ${i[t]};
  `;
}, F = (t) => {
  const o = {
    r: "0",
    c: "50%",
    l: "auto"
  }, n = {
    r: "auto",
    c: "50%",
    l: "0"
  };
  return `
    right: ${o[t]};
    left: ${n[t]};
  `;
}, N = (t) => {
  const o = t.iconSize <= 40, n = t.iconSize - 8, i = t.iconSize + 5, s = o ? 4 : 8, a = o ? 27 : 32;
  if (t.positionX === "c" && t.positionY === "b") {
    const p = u(t.positionX, t.translateX);
    return {
      btnStyle: `
        width: ${n}px;
        height: ${i}px;
        transform: translateY(10px) ${p};
        border-radius: ${a}px ${a}px 0px 0px;
        
        &:hover, &:focus-visible, &:active {
          transform: translateY(0px) ${p};
        }
      `,
      innerSvgStyle: `
        align-items: start;
        justify-content: center;
        svg {
          padding: 0;
          padding-top: ${s}px;
        }
      `
    };
  }
  if (t.positionX === "c" && t.positionY === "t") {
    const p = u(t.positionX, t.translateX);
    return {
      btnStyle: `
        width: ${n}px;
        height: ${i}px;
        transform: translateY(-10px) ${p};
        border-radius: 0px 0px ${a}px ${a}px;
        
        &:hover, &:focus-visible, &:active  {
          transform: translateY(0px) ${p};
        }
      `,
      innerSvgStyle: `
        align-items: end;
        justify-content: center;
        svg {
          padding: 0;
          padding-bottom: ${s}px;
        }
      `
    };
  }
  const c = u(t.positionY, t.translateY);
  return t.positionX === "r" ? {
    btnStyle: `
        width: ${i}px;
        height: ${n}px;
        transform: translateX(10px)${c};
        border-radius: ${a}px 0px 0px ${a}px;
        
        &:hover, &:focus-visible, &:active  {
          transform: translateX(0px)${c};
        }
      `,
    innerSvgStyle: `
        align-items: center;
        justify-content: start;
        svg {
          padding: 0;
          padding-left: ${s}px;
        }
      `
  } : t.positionX === "l" ? {
    btnStyle: `
        width: ${i}px;
        height: ${n}px;
        transform: translateX(-10px)${c};
        border-radius: 0px ${a}px ${a}px 0px;
        
        &:hover, &:focus-visible, &:active  {
          transform: translateX(0px)${c};
        }
      `,
    innerSvgStyle: `
        align-items: center;
        justify-content: end;
        svg {
          padding: 0;
          padding-right: ${s}px;
        }
      `
  } : { btnStyle: "", innerSvgStyle: "" };
}, W = (t) => {
  const [o, n] = t.positionX === "r" ? ["left", "right"] : ["right", "left"], [i, s] = t.positionY === "t" && t.positionX === "c" ? ["bottom", "top"] : ["top", "bottom"], a = `
    ${i}: -3px;
    ${o}: -1px;
    ${s}: initial;
    ${n}: initial;

    svg {
      height: 20px;
      width: 20px;
    }
  `, c = `
    ${i}: -5px;
    ${o}: -3px;
    ${s}: initial;
    ${n}: initial;

    svg {
      height: 16px;
      width: 16px;
    }
  `;
  return t.iconSize === m.MEDIUM ? a : c;
}, b = (t) => ({
  position: `
      ${F(t.positionX)}
      ${D(t.positionY, t.positionX)}
    `,
  positionDirection: T(t.positionX),
  style: N(t),
  checkMarkPosition: W(t)
}), U = {
  [r.RIGHT_TOP]: ["r", "t"],
  [r.RIGHT_MIDDLE]: ["r", "m"],
  [r.RIGHT_BOTTOM]: ["r", "b"],
  [r.CENTER_TOP]: ["c", "t"],
  [r.CENTER_BOTTOM]: ["c", "b"],
  [r.LEFT_TOP]: ["l", "t"],
  [r.LEFT_MIDDLE]: ["l", "m"],
  [r.LEFT_BOTTOM]: ["l", "b"]
}, I = (t) => {
  const [o, n] = U[(t == null ? void 0 : t.iconPosition) || r.RIGHT_BOTTOM], i = (t == null ? void 0 : t.iconSize) || m.MEDIUM;
  return {
    positionX: o,
    positionY: n,
    iconSize: i,
    translateX: t == null ? void 0 : t.iconPositionX,
    translateY: t == null ? void 0 : t.iconPositionY
  };
}, j = (t) => {
  var i, s;
  const o = I((i = t == null ? void 0 : t.iconPreference) == null ? void 0 : i.pc), n = I((s = t == null ? void 0 : t.iconPreference) == null ? void 0 : s.sp);
  return {
    round: {
      pc: d(o),
      sp: d(n)
    },
    bookmark: {
      pc: b(o),
      sp: b(n)
    }
  };
}, H = (t) => {
  const o = L(t);
  return {
    iconBg: t,
    iconFg: o ? R : g,
    checkMarkBg: "#21BF73",
    checkMarkFg: g
  };
}, G = (t) => {
  const o = t.widgetColor || M, n = H(o), i = j(t);
  return {
    palette: n,
    widgetIcon: {
      shape: t.widgetIconShape || S.ROUND,
      iconType: t.widgetIconType || e.ACCESSIBILITY,
      round: i.round,
      bookmark: i.bookmark
    }
  };
}, et = (t) => `
    ${(t == null ? void 0 : t.top) !== void 0 ? `top: ${t.top};` : ""}
    ${(t == null ? void 0 : t.bottom) !== void 0 ? `bottom: ${t.bottom};` : ""}
    ${(t == null ? void 0 : t.left) !== void 0 ? `left: ${t.left};` : ""}
    ${(t == null ? void 0 : t.right) !== void 0 ? `right: ${t.right};` : ""}
  `, K = l(() => import("./BookmarkIcon.CXDNfHTi.js")), V = l(() => import("./RoundedIcon.lVym9Q-c.js")), Z = l(() => import("./IconAccessibilityAndLanguage.BHidv2rt.js")), q = l(() => import("./IconAccessibilityAndTranslate.Chn86MAe.js")), Q = l(() => import("./IconAccessibilityBold.B7QFr-uf.js")), J = l(() => import("./IconAccessibilityFowardBold.B29knVnb.js")), P = l(() => import("./IconCaneUser.CGFw8XaC.js")), f = l(() => import("./IconControlKnob.ke_txxN3.js")), tt = {
  [e.ACCESSIBILITY]: Q,
  [e.WHEELCHAIR]: J,
  [e.CANE_USER]: P,
  [e.CONTROL_KNOB]: f,
  // サイト翻訳契約時のみ利用可能なアイコン
  [e.ACCESSIBILITY_AND_TRANSLATE]: q,
  [e.ACCESSIBILITY_AND_LANGUAGE]: Z
}, ot = ({ onClick: t, id: o, theme: n }) => {
  const i = k((p) => p.isUsing), s = X((p) => p.isTranslating), a = {
    id: o,
    theme: n,
    onClick: t,
    IconElement: tt[n.widgetIcon.iconType],
    isActive: i || s
  }, c = n.widgetIcon.shape === S.BOOKMARK ? K : V;
  return /* @__PURE__ */ h(y, { fallback: null, children: /* @__PURE__ */ h(c, { ...a }) });
}, nt = (t) => {
  const o = E(), n = document.createElement("div");
  o.appendChild(n);
  const i = G(t);
  Y(), O(
    /* @__PURE__ */ h(
      ot,
      {
        id: A,
        onClick: () => C(!0),
        theme: i
      }
    ),
    n
  );
}, ut = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  initialize: nt
}, Symbol.toStringTag, { value: "Module" }));
export {
  x as P,
  ut as i,
  et as o,
  rt as s,
  lt as t
};