import { dragResizeWindowRNDClasses as t } from "../../../DragResizeWindowRND/classes/index.js";
import { AREAS_VIEWER_PANEL_INTERACTION_LAYER_OFFSET as n, AREAS_VIEWER_PANEL_RESIZE_RAIL_OFFSET as l, AREAS_VIEWER_PANEL_STACKING_OFFSET as o } from "./constants.js";
const d = {
  /**
   * Root areas viewer Styles
   */
  root: ({ theme: e, ownerState: i }) => ({
    width: "100%",
    height: "100%",
    overflow: "hidden",
    position: "relative",
    background: e.vars.palette.background.base,
    // areaGridLayout
    "& .M4LAreasViewer-areaGridLayout": {
      height: "100% !important",
      overflow: "auto",
      flexGrow: 1,
      [`&.${t.dragging}, &.${t.resizing}`]: {
        // Prevent nested window gestures from competing with panel-resize gestures.
        pointerEvents: "none",
        userSelect: "none",
        touchAction: "none"
      }
    },
    ...i?.maximized ? {
      background: e.vars.palette.background.default
    } : {}
  }),
  /**
   * Areas root Styles
   */
  areaRoot: ({ ownerState: e }) => ({
    display: "none",
    position: "absolute",
    flexDirection: "row",
    inset: 0,
    overflow: "hidden",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    visibility: "hidden",
    ...e?.selected && {
      display: "block",
      visibility: "visible"
    }
  }),
  /**
   * Inner for hooks Styles
   */
  baseArea: () => ({
    display: "flex",
    flexDirection: "row",
    height: "100%",
    width: "100%",
    overflow: "hidden"
  }),
  /**
   * Panel-aware layout wrapper for one area body.
   */
  panelLayout: () => ({
    display: "flex",
    flexDirection: "column",
    width: "100%",
    height: "100%",
    minWidth: 0,
    minHeight: 0,
    overflow: "hidden",
    position: "relative"
  }),
  /**
   * Horizontal row that holds docked left/right panels plus the main layout flow.
   */
  panelMiddleRow: () => ({
    display: "flex",
    flexDirection: "row",
    flexGrow: 1,
    minWidth: 0,
    minHeight: 0,
    overflow: "hidden"
  }),
  /**
   * Central column that keeps top/bottom docked panels aligned with the grid width.
   */
  panelCenterColumn: () => ({
    display: "flex",
    flexDirection: "column",
    flexGrow: 1,
    minWidth: 0,
    minHeight: 0,
    overflow: "hidden"
  }),
  /**
   * Main layout flow that keeps the responsive grid and overlay panels together.
   */
  mainLayoutFlow: ({ ownerState: e }) => ({
    position: "relative",
    display: "flex",
    flexGrow: 1,
    minWidth: 0,
    minHeight: 0,
    overflow: "hidden",
    ...e?.isResizingPanel ? {
      // Let the temporary panel interaction layer own the pointer while a pinned panel resizes.
      pointerEvents: "none"
    } : {}
  }),
  /**
   * Overlay root used by unpinned panels so they sit above the main layout flow.
   */
  overlayPanels: ({ ownerState: e }) => ({
    position: "absolute",
    inset: 0,
    zIndex: (e?.panelZIndexBase ?? 0) + o,
    pointerEvents: "none",
    "& > *": {
      // Overlay children recover pointer events normally, except during an active pinned resize session.
      pointerEvents: e?.isResizingPanel ? "none" : "auto"
    }
  }),
  /**
   * Shared slot used by docked and overlay panels.
   */
  panelSlot: ({ ownerState: e, theme: i }) => ({
    display: "flex",
    flexShrink: 0,
    minWidth: 0,
    minHeight: 0,
    overflow: "hidden",
    ...e?.overlay ? {
      position: "absolute",
      zIndex: (e?.panelZIndexBase ?? 0) + o
    } : {
      position: "relative",
      zIndex: (e?.panelZIndexBase ?? 0) + o
    },
    ...e?.side === "left" && {
      left: 0,
      top: 0,
      bottom: 0,
      height: "100%",
      ...e?.overlay ? {
        boxShadow: `12px 0 16px 0 ${i.vars.palette.background.neutral} !important`
      } : {}
    },
    ...e?.side === "right" && {
      right: 0,
      top: 0,
      bottom: 0,
      height: "100%",
      ...e?.overlay ? {
        boxShadow: `-12px 0 16px 0  ${i.vars.palette.background.neutral} !important`
      } : {}
    },
    ...e?.side === "top" && {
      top: 0,
      left: 0,
      right: 0,
      width: "100%",
      ...e?.overlay ? {
        boxShadow: `0 12px 16px 0 ${i.vars.palette.background.neutral} !important`
      } : {}
    },
    ...e?.side === "bottom" && {
      bottom: 0,
      left: 0,
      right: 0,
      width: "100%",
      ...e?.overlay ? {
        boxShadow: `0 -12px 16px 0 ${i.vars.palette.background.neutral} !important`
      } : {}
    }
  }),
  /**
   * Full-size host that lets the Window shell occupy the resolved panel slot
   * without depending on DragResizeWindowRND as an extra wrapper.
   */
  panelWindowHost: () => ({
    position: "relative",
    display: "flex",
    flexGrow: 1,
    width: "100%",
    height: "100%",
    minWidth: 0,
    minHeight: 0,
    overflow: "hidden"
  }),
  /**
   * Stable sibling rail used by pinned panels so the resize gesture does not
   * depend on the shrinking panel slot itself.
   */
  panelResizeRail: ({ ownerState: e }) => ({
    position: "relative",
    flexShrink: 0,
    overflow: "visible",
    pointerEvents: "none",
    zIndex: (e?.panelZIndexBase ?? 0) + l,
    ...e?.side === "left" || e?.side === "right" ? {
      width: 0,
      minWidth: 0,
      height: "100%",
      alignSelf: "stretch"
    } : {
      height: 0,
      minHeight: 0,
      width: "100%"
    }
  }),
  /**
   * Transparent layer mounted only while a pinned-panel resize session is active.
   * It owns the gesture after the rail mousedown so the user can move quickly
   * across the whole viewer without depending on the narrow rail hit area.
   */
  panelResizeInteractionLayer: ({ ownerState: e }) => ({
    position: "absolute",
    inset: 0,
    zIndex: (e?.panelZIndexBase ?? 0) + n,
    background: "transparent",
    pointerEvents: "auto",
    userSelect: "none",
    touchAction: "none",
    cursor: e?.side === "left" || e?.side === "right" ? "col-resize" : "row-resize"
  }),
  /**
   * Wrapper window modal Styles
   */
  wrapperWindowModal: () => ({
    width: "100%",
    height: "100%",
    position: "relative"
  }),
  /**
   * Window base Styles
   */
  windowBase: () => ({})
};
export {
  d as areasViewerStyles
};
