@import '../../../global/theme.less';

.root {
  background: @t-dashboard-bg;

  :global(.react-grid-item.react-grid-placeholder) {
    background: transparent;
    border: 2px dashed @t-dashboard-dash-color;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
  }
  .item {
    border-width: 2px;
    border-style: solid;
    border-color: @t-dashboard-block-bg;
    box-shadow: 0 2px 4px 0 @dashboard-pannel-shadow;
    overflow: hidden;
    &:hover,
    &:active {
      border-color: @theme-color;
    }

    .icon {
      display: none;
      position: absolute;
      bottom: 1px;
      right: 1px;
      font-size: 20px;
      color: @theme-color;
      z-index: 1;
    }
    > :global(.react-resizable-handle) {
      display: none;
      z-index: 1;
      bottom: 1px;
      right: 1px;
    }
    &.resizable {
      > :global(.react-resizable-handle) {
        display: block;
        opacity: 0;
      }
      .icon {
        display: block;
      }
    }
    &.touch {
      touch-action: auto !important;
    }
  }
}