@import '@opensumi/ide-core-browser/lib/style/variable.less';

.resizeWrapper {
  width: 100%;
  height: 100%;
  user-select: none;
}

.resizePanel {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-end;

  .resizeItem {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 8px 20px 0 10px;
    .closeBtn {
      display: none;
      position: absolute;
      right: 12px;
      top: 10px;
      cursor: pointer;
      border-radius: 4px;
      font-size: 14px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      &:hover {
        background-color: var(--kt-icon-hoverBackground);
        transform: scale(1.1);
      }
    }
    &:hover {
      .closeBtn {
        display: block;
      }
    }
  }
}

.resizeDelegate {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  pointer-events: all;
  z-index: 1;

  .resizeHandler {
    width: 100%;
    height: 100%;

    .resizeDelegetContainer {
      width: 100%;
      height: 100%;
      pointer-events: inherit;
    }

    .resizeDelegateBar {
      float: right;
      width: 1px;
      height: 100%;
      cursor: ew-resize;
      transform: translateX(1px);
      pointer-events: all;
      background: var(--terminal-border);
      opacity: 0.35;
    }
  }
}
