import "../../../../@ant-design/cssinjs/es/extractStyle.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCacheToken.mjs";
import "react";
import "../../../../@ant-design/cssinjs/es/StyleContext.mjs";
import { unit as a } from "../../../../@ant-design/cssinjs/es/util/index.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useCompatibleInsertionEffect.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useEffectCleanupRegister.mjs";
import "../../../../@ant-design/cssinjs/es/hooks/useHMR.mjs";
import "../../../../rc-util/es/warning.mjs";
import "../../../../@ant-design/cssinjs/es/theme/createTheme.mjs";
import "../../../../@ant-design/cssinjs/es/theme/ThemeCache.mjs";
import "../../../../@ant-design/cssinjs/es/transformers/legacyLogicalProperties.mjs";
import { resetComponent as e, genFocusOutline as t } from "../../style/index.mjs";
import { genStyleHooks as l } from "../../theme/util/genComponentStyleHook.mjs";
import { merge as n } from "../../theme/util/statistic.mjs";
const c = (r) => {
  const {
    checkboxCls: o
  } = r, i = `${o}-wrapper`;
  return [
    // ===================== Basic =====================
    {
      // Group
      [`${o}-group`]: Object.assign(Object.assign({}, e(r)), {
        display: "inline-flex",
        flexWrap: "wrap",
        columnGap: r.marginXS,
        // Group > Grid
        [`> ${r.antCls}-row`]: {
          flex: 1
        }
      }),
      // Wrapper
      [i]: Object.assign(Object.assign({}, e(r)), {
        display: "inline-flex",
        alignItems: "baseline",
        cursor: "pointer",
        // Fix checkbox & radio in flex align #30260
        "&:after": {
          display: "inline-block",
          width: 0,
          overflow: "hidden",
          content: "'\\a0'"
        },
        // Checkbox near checkbox
        [`& + ${i}`]: {
          marginInlineStart: 0
        },
        [`&${i}-in-form-item`]: {
          'input[type="checkbox"]': {
            width: 14,
            // FIXME: magic
            height: 14
            // FIXME: magic
          }
        }
      }),
      // Wrapper > Checkbox
      [o]: Object.assign(Object.assign({}, e(r)), {
        position: "relative",
        whiteSpace: "nowrap",
        lineHeight: 1,
        cursor: "pointer",
        borderRadius: r.borderRadiusSM,
        // To make alignment right when `controlHeight` is changed
        // Ref: https://github.com/ant-design/ant-design/issues/41564
        alignSelf: "center",
        // Wrapper > Checkbox > input
        [`${o}-input`]: {
          position: "absolute",
          // Since baseline align will get additional space offset,
          // we need to move input to top to make it align with text.
          // Ref: https://github.com/ant-design/ant-design/issues/38926#issuecomment-1486137799
          inset: 0,
          zIndex: 1,
          cursor: "pointer",
          opacity: 0,
          margin: 0,
          [`&:focus-visible + ${o}-inner`]: Object.assign({}, t(r))
        },
        // Wrapper > Checkbox > inner
        [`${o}-inner`]: {
          boxSizing: "border-box",
          display: "block",
          width: r.checkboxSize,
          height: r.checkboxSize,
          direction: "ltr",
          backgroundColor: r.colorBgContainer,
          border: `${a(r.lineWidth)} ${r.lineType} ${r.colorBorder}`,
          borderRadius: r.borderRadiusSM,
          borderCollapse: "separate",
          transition: `all ${r.motionDurationSlow}`,
          "&:after": {
            boxSizing: "border-box",
            position: "absolute",
            top: "50%",
            insetInlineStart: "25%",
            display: "table",
            width: r.calc(r.checkboxSize).div(14).mul(5).equal(),
            height: r.calc(r.checkboxSize).div(14).mul(8).equal(),
            border: `${a(r.lineWidthBold)} solid ${r.colorWhite}`,
            borderTop: 0,
            borderInlineStart: 0,
            transform: "rotate(45deg) scale(0) translate(-50%,-50%)",
            opacity: 0,
            content: '""',
            transition: `all ${r.motionDurationFast} ${r.motionEaseInBack}, opacity ${r.motionDurationFast}`
          }
        },
        // Wrapper > Checkbox + Text
        "& + span": {
          paddingInlineStart: r.paddingXS,
          paddingInlineEnd: r.paddingXS
        }
      })
    },
    // ===================== Hover =====================
    {
      // Wrapper & Wrapper > Checkbox
      [`
        ${i}:not(${i}-disabled),
        ${o}:not(${o}-disabled)
      `]: {
        [`&:hover ${o}-inner`]: {
          borderColor: r.colorPrimary
        }
      },
      [`${i}:not(${i}-disabled)`]: {
        [`&:hover ${o}-checked:not(${o}-disabled) ${o}-inner`]: {
          backgroundColor: r.colorPrimaryHover,
          borderColor: "transparent"
        },
        [`&:hover ${o}-checked:not(${o}-disabled):after`]: {
          borderColor: r.colorPrimaryHover
        }
      }
    },
    // ==================== Checked ====================
    {
      // Wrapper > Checkbox
      [`${o}-checked`]: {
        [`${o}-inner`]: {
          backgroundColor: r.colorPrimary,
          borderColor: r.colorPrimary,
          "&:after": {
            opacity: 1,
            transform: "rotate(45deg) scale(1) translate(-50%,-50%)",
            transition: `all ${r.motionDurationMid} ${r.motionEaseOutBack} ${r.motionDurationFast}`
          }
        }
      },
      [`
        ${i}-checked:not(${i}-disabled),
        ${o}-checked:not(${o}-disabled)
      `]: {
        [`&:hover ${o}-inner`]: {
          backgroundColor: r.colorPrimaryHover,
          borderColor: "transparent"
        }
      }
    },
    // ================= Indeterminate =================
    {
      [o]: {
        "&-indeterminate": {
          // Wrapper > Checkbox > inner
          [`${o}-inner`]: {
            backgroundColor: r.colorBgContainer,
            borderColor: r.colorBorder,
            "&:after": {
              top: "50%",
              insetInlineStart: "50%",
              width: r.calc(r.fontSizeLG).div(2).equal(),
              height: r.calc(r.fontSizeLG).div(2).equal(),
              backgroundColor: r.colorPrimary,
              border: 0,
              transform: "translate(-50%, -50%) scale(1)",
              opacity: 1,
              content: '""'
            }
          }
        }
      }
    },
    // ==================== Disable ====================
    {
      // Wrapper
      [`${i}-disabled`]: {
        cursor: "not-allowed"
      },
      // Wrapper > Checkbox
      [`${o}-disabled`]: {
        // Wrapper > Checkbox > input
        [`&, ${o}-input`]: {
          cursor: "not-allowed",
          // Disabled for native input to enable Tooltip event handler
          // ref: https://github.com/ant-design/ant-design/issues/39822#issuecomment-1365075901
          pointerEvents: "none"
        },
        // Wrapper > Checkbox > inner
        [`${o}-inner`]: {
          background: r.colorBgContainerDisabled,
          borderColor: r.colorBorder,
          "&:after": {
            borderColor: r.colorTextDisabled
          }
        },
        "&:after": {
          display: "none"
        },
        "& + span": {
          color: r.colorTextDisabled
        },
        [`&${o}-indeterminate ${o}-inner::after`]: {
          background: r.colorTextDisabled
        }
      }
    }
  ];
};
function d(r, o) {
  const i = n(o, {
    checkboxCls: `.${r}`,
    checkboxSize: o.controlInteractiveSize
  });
  return [c(i)];
}
const z = l("Checkbox", (r, o) => {
  let {
    prefixCls: i
  } = o;
  return [d(i, r)];
});
export {
  z as default,
  c as genCheckboxStyle,
  d as getStyle
};
