@mixin resize-handle-ew {
  height: 100%;
  top: 0;
  transform: rotate(0);
  width: 8px;
}

@mixin resize-handle-ns {
  height: 8px;
  left: 0;
  transform: rotate(0);
  width: 100%;
}

@mixin resize-handle-corner {
  height: 16px;
  width: 16px;
}

@mixin resize-handle-se-sw {
  @include resize-handle-corner;
  bottom: -8px;
}

@mixin resize-handle-ne-nw {
  @include resize-handle-corner;
  top: -8px;
}

.xh-dash-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  &--empty-overlay {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .bp6-overlay-backdrop {
      background-color: var(--xh-bg);
    }
  }

  .react-grid-item {
    border: var(--xh-border-solid);
    display: flex;

    > .react-resizable-handle {
      // Make the resize handles fill the entire side
      &.react-resizable-handle-n {
        @include resize-handle-ns;
        top: -4px;
      }

      &.react-resizable-handle-s {
        @include resize-handle-ns;
        bottom: -4px;
      }

      &.react-resizable-handle-e {
        @include resize-handle-ew;
        right: -4px;
      }

      &.react-resizable-handle-w {
        @include resize-handle-ew;
        left: -4px;
      }

      &.react-resizable-handle-ne {
        @include resize-handle-ne-nw;
        right: -8px;
      }

      &.react-resizable-handle-nw {
        @include resize-handle-ne-nw;
        left: -8px;
      }

      &.react-resizable-handle-se {
        @include resize-handle-se-sw;
        right: -8px;
      }

      &.react-resizable-handle-sw {
        @include resize-handle-se-sw;
        left: -8px;
      }

      // Hide the resize handles
      &::after {
        border-color: transparent;
      }
    }

    &.react-grid-placeholder {
      background-color: var(--xh-intent-primary);
    }

    > .xh-panel {
      > .xh-panel__inner {
        > .xh-panel-header {
          background-color: var(--xh-intent-neutral-trans1);
          height: 24px;
          border-bottom: var(--xh-border-solid);

          .xh-panel-header__title,
          > svg {
            color: var(--xh-gray);
            font-size: 12px;
            margin-right: var(--xh-pad-half-px);
          }

          // Header "tool" buttons.
          .xh-button--minimal.xh-button--intent-none {
            color: var(--xh-gray) !important;
          }
        }
      }
    }
  }

  &--draggable {
    .react-grid-item {
      > .xh-panel {
        > .xh-panel__inner {
          > .xh-panel-header {
            > .xh-panel-header__title,
            > svg {
              cursor: move;
            }
          }
        }
      }
    }
  }
}