import { genComponentStyleHook as s } from "../../utils/cssinjs/index.mjs";
const i = () => ({
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)"
}), l = (r) => ({
  position: "absolute",
  zIndex: 1,
  display: "none",
  background: r.colorPrimary,
  opacity: 0.2,
  transition: "none",
  pointerEvents: "none"
}), n = (r) => {
  const { componentCls: e, namespace: o } = r, t = `--${o}-splitter-bar-preview-offset`, a = `${e}-bar`;
  return {
    [e]: {
      boxSizing: "border-box",
      margin: 0,
      padding: 0,
      color: r.textColor1,
      fontSize: r.fontSize,
      lineHeight: r.lineHeight,
      listStyle: "none",
      fontFamily: "inherit",
      display: "flex",
      width: "100%",
      height: "100%",
      alignItems: "stretch",
      [`${e}-bar`]: {
        flex: "none",
        position: "relative",
        userSelect: "none",
        [`${e}-bar-dragger`]: {
          zIndex: 1,
          ...i(r),
          // Hover background
          "&::before": {
            content: '""',
            background: "rgba(0, 0, 0, 0.04)",
            ...i(r)
          },
          // Spinner
          "&::after": {
            content: '""',
            background: "rgba(0, 0, 0, 0.15)",
            ...i(r)
          },
          // Hover
          [`&:hover:not(${e}-bar-dragger-active)`]: {
            "&::before": {
              background: "#e6f4ff"
            }
          },
          // Active
          "&-active": {
            zIndex: 2,
            "&::before": {
              background: "#bae0ff"
            }
          },
          [`&-active${a}-dragger-customize`]: {
            [`${a}-dragger-icon`]: {
              color: r.colorPrimary
            }
          },
          [`&-disabled${e}-bar-dragger`]: {
            zIndex: 0,
            "&, &:hover, &-active": {
              cursor: "default",
              "&::before": {
                background: "rgba(0,0,0,0.04)"
              }
            },
            "&::after": {
              display: "none"
            }
          },
          "&-customize": {
            [`${a}-dragger-icon`]: {
              ...i(r),
              display: "flex",
              alignItems: "center",
              color: r.antdv.colorFill
            },
            "&::after": {
              display: "none"
            }
          }
        },
        [`${e}-bar-collapse-bar`]: {
          ...i(r),
          zIndex: 1e3,
          background: "rgba(0,0,0,0.04)",
          fontSize: r.fontSizeSM,
          borderRadius: r.calc(r.borderRadius).div(2).equal(),
          color: r.textColor1,
          cursor: "pointer",
          opacity: 0,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          // Hover
          [`&:hover:not(${a}-collapse-bar-customize)`]: {
            background: r.antdv.controlItemBgActive
          },
          // Active
          [`&:active:not(${a}-collapse-bar-customize)`]: {
            background: r.antdv.controlItemBgActiveHover
          },
          [`${a}-collapse-icon`]: {
            display: "flex",
            alignItems: "center"
          }
        },
        [`${a}-collapse-bar-customize`]: {
          background: "transparent"
        },
        "&:hover, &:active": {
          [`${e}-bar-collapse-bar-hover-only`]: {
            opacity: 1
          }
        },
        [`${e}-bar-collapse-bar-hover-only`]: {
          "@media(hover:none)": {
            opacity: 1
          }
        },
        [`${e}-bar-collapse-bar-always-hidden`]: {
          display: "none"
        },
        [`${e}-bar-collapse-bar-always-visible`]: {
          opacity: 1
        }
      },
      [`${e}-mask`]: {
        position: "fixed",
        zIndex: 1e3,
        inset: 0,
        "&-horizontal": {
          cursor: "col-resize"
        },
        "&-vertical": {
          cursor: "row-resize"
        }
      },
      "&-horizontal": {
        flexDirection: "row",
        [`& > ${e}-bar`]: {
          width: 0,
          [`${e}-bar-preview`]: {
            height: "100%",
            width: r.splitterBarSize,
            ...l(r),
            "&-active": {
              display: "block",
              transform: `translateX(var(${t}))`
            }
          },
          [`${e}-bar-dragger`]: {
            cursor: "col-resize",
            height: "100%",
            width: r.splitterTriggerSize,
            "&::before": {
              height: "100%",
              width: r.splitterBarSize
            },
            "&::after": {
              height: r.splitterSplitBarDraggableSize,
              width: r.splitterBarSize
            }
          },
          [`${e}-bar-collapse-bar`]: {
            width: r.fontSizeSM,
            height: "24px",
            "&-start": {
              left: "auto",
              right: r.calc(r.splitterTriggerSize).div(2).equal(),
              transform: "translateY(-50%)"
            },
            "&-end": {
              left: r.calc(r.splitterTriggerSize).div(2).equal(),
              right: "auto",
              transform: "translateY(-50%)"
            }
          }
        }
      },
      "&-vertical": {
        flexDirection: "column",
        [`& > ${e}-bar`]: {
          height: 0,
          [`${e}-bar-preview`]: {
            height: r.splitterBarSize,
            width: "100%",
            ...l(r),
            [`&${e}-bar-preview-active`]: {
              display: "block",
              transform: `translateY(var(${t}))`
            }
          },
          [`${e}-bar-dragger`]: {
            cursor: "row-resize",
            width: "100%",
            height: r.splitterTriggerSize,
            "&::before": {
              width: "100%",
              height: r.splitterBarSize
            },
            "&::after": {
              width: r.splitterSplitBarDraggableSize,
              height: r.splitterBarSize
            }
          },
          [`${e}-bar-collapse-bar`]: {
            height: r.fontSizeSM,
            width: "24px",
            "&-start": {
              top: "auto",
              bottom: r.calc(r.splitterTriggerSize).div(2).equal(),
              transform: "translateX(-50%)"
            },
            "&-end": {
              top: r.calc(r.splitterTriggerSize).div(2).equal(),
              bottom: "auto",
              transform: "translateX(-50%)"
            }
          }
        }
      },
      [`${e}-panel`]: {
        overflow: "auto",
        padding: "0 1px",
        scrollbarWidth: "thin",
        boxSizing: "border-box",
        "&-hidden": {
          padding: 0,
          overflow: "hidden"
        },
        [`&:has(${e}:only-child)`]: {
          overflow: "hidden"
        }
      }
    }
  };
}, d = s(
  "Splitter",
  (r) => [n(r)],
  {
    splitterBarSize: 2,
    splitterTriggerSize: 6,
    splitterSplitBarDraggableSize: 20
  }
);
export {
  d as default,
  n as genSplitterStyle
};
