@import './token.less';

.react-resizable.react-grid-placeholder {
  z-index: 0;
  background-color: var(--color-mask-bg);
}
.react-grid-item {
  background-color: @grid-layout-card-bg;
  &:hover {
    z-index: 1;
  }
  &.edit {
    cursor: move;
  }
  .react-resizable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 0;
    right: 0;
    background: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC45ODA2NDE3NiA2LjUyNTg5OTgzdi0yLjUyNTg5OTgzYzAtLjU1MjI4NDc1LS40NDc3MTUyNS0xLTEtMS0uNTUyMjg0NzUgMC0xIC40NDc3MTUyNS0xIDF2NS45OTMyMTYwOWguMDAwOTkyNDZsLjAwMDAwMTAyLjAwMjAzNzU4IDYuMDE4MzY0OTkuMDA0MDcwMDZjLjAwMDIyNTI3LjAwMDAwMDE1LjAwMDQ1MDU0LjAwMDAwMDIzLjAwMDY3NTgxLjAwMDAwMDIzLjU1MTkxMTM4IDAgLjk5OTMyMzk2LS40NDc0MTI1OC45OTkzMjM5Ni0uOTk5MzIzOTYgMC0uNTUyMjg0NzUtLjQ0NzcxNTI1LTEtMS0xaC0yLjU0Mzk2N2wzLjUyNDYwODc2LTMuNTI2NDc5ODctMS40NzU5NzA5OC0xLjQ3MzUyMDEzeiIgZmlsbD0iIzYwNjA2MCIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIuNSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIuOTgwNjQyIDApIi8+PC9zdmc+);
    background-position: bottom right;
    padding: 0 3px 3px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: se-resize;
    z-index: 1;
    &::after {
      display: none;
    }
    &:hover {
      background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC45ODA2NDE3NiA2LjUyNTg5OTgzdi0yLjUyNTg5OTgzYzAtLjU1MjI4NDc1LS40NDc3MTUyNS0xLTEtMS0uNTUyMjg0NzUgMC0xIC40NDc3MTUyNS0xIDF2NS45OTMyMTYwOWguMDAwOTkyNDZsLjAwMDAwMTAyLjAwMjAzNzU4IDYuMDE4MzY0OTkuMDA0MDcwMDZjLjAwMDIyNTI3LjAwMDAwMDE1LjAwMDQ1MDU0LjAwMDAwMDIzLjAwMDY3NTgxLjAwMDAwMDIzLjU1MTkxMTM4IDAgLjk5OTMyMzk2LS40NDc0MTI1OC45OTkzMjM5Ni0uOTk5MzIzOTYgMC0uNTUyMjg0NzUtLjQ0NzcxNTI1LTEtMS0xaC0yLjU0Mzk2N2wzLjUyNDYwODc2LTMuNTI2NDc5ODctMS40NzU5NzA5OC0xLjQ3MzUyMDEzeiIgZmlsbD0iIzAwNjRmZiIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxMi45ODA2NDIgMCkiLz48L3N2Zz4K);
    }
  }
}

.@{grid-layout-prefix-cls} {
  // .react-grid-item {
  //   background-color: @grid-layout-card-bg;
  //   &:hover {
  //     z-index: 1;
  //   }
  //   &.edit {
  //     cursor: move;
  //   }
  // }
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  &-content {
    align-self: stretch;
    height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    &.isEdit {
      background-color: @grid-layout-edit-fill;
      background-attachment: local, scroll;
      overflow-y: scroll;
    }
    &.isOnlyScreen {
      overflow: hidden;
    }
  }
}