@import '~react-grid-layout/css/styles.css';
@import '~react-resizable/css/styles.css';
@import './variables.less';

:global(.react-grid-item){
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;
}
:global(.react-resizable-handle-se) {
    z-index: 999
}

:global(.react-grid-item:hover .remove){
    display:inline-block;
    padding: 3px;
}

:global(.react-grid-item .react-resizable-handle){
    visibility: hidden;
    z-index: 999;
}

:global(.react-grid-item:hover .react-resizable-handle){
    visibility: visible;
}

:global(.remove) {  
    position: absolute;
    right: 7px;
    top: 1px;
    cursor: pointer;
    z-index: 999;
    display:none;
}

/* gridLayout start */
:global(.page_editing) {
    background-color: @component-background;
    border: 1px solid @border-color-base;
    box-shadow: 2px 2px 5px @shadow-color;
}

:global(.page_editing .react-grid-item){
    border: 1px dashed blue;
}

:global(.page_editing .react-grid-item:hover){
    opacity:0.5;
    border: 1px solid blue;
}