import { alpha as i, styled as o } from "@mui/material/styles";
import { gridLayoutClasses as e } from "./classes/index.js";
const n = {}, a = o("div")`
  overflow: auto;
  position: relative;
  transition: height 200ms ease;
  .${e.gridItemRoot} {
    transition: all 200ms ease;
    transition-property: left, top;
  }
  .${e.gridItemRoot} img {
    pointer-events: none;
    user-select: none;
  }
  .${e.gridItemRoot}.${e.cssTransforms} {
    transition-property: transform;
    transition: left 0.1s ease, top 0.1s ease;
  }
  .${e.gridItemRoot}.${e.maximizeOther} {
    display: none;
  }
  .${e.gridItemRoot}.${e.gridItemFreeMove} {
    z-index: 1;
    will-change: width, height;
  }
  .${e.gridItemRoot}.${e.resizing} {
    z-index: 2000;
    will-change: width, height;
  }
  .${e.gridItemRoot}.${e.dragging} {
    transition: none;
    z-index: 4000;
    will-change: transform;
  }
  .${e.gridItemRoot}.dropping {
    visibility: hidden;
  }
  .${e.gridItemRoot}.${e.gridItemPlaceholder} {
    background: ${(t) => t.theme.vars.palette.primary?.toneOpacity};
    opacity: 0.5;
    transition-duration: 100ms;
    z-index: 3000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  /* .${e.gridItemRoot} > .react-resizable-handle {
    position: absolute;
    width: 7px;
    height: 7px;
    background-image: unset;
    & .M4LIcon-icon {
      width: 10px;
      height: 10px;
      min-width: 10px;
      min-height: 10px;
      background-color: ${(t) => i(t.theme.colorSchemes.finalTheme.palette.text.primary, 0.3)};
    }
  }
  .${e.gridItemRoot} > .react-resizable-handle {
    display: none!important,
  },
  .${e.gridItemRoot}.${e.invisible} {
    display: none;
  }
  ${n}
`;
export {
  a as GridLayoutRoot
};
