@import "ui-variables";

.nuclide-ui-panel-component {
  cursor: default;
  -webkit-user-select: none;
  white-space: nowrap;

  display: flex;
  align-items: stretch;

  &.left {
    flex-direction: row-reverse;
    height: inherit;
  }

  &.bottom {
    flex-direction: column;
    width: 100%;
  }

  &.top {
    flex-direction: column-reverse;
    width: 100%;
  }

  &.right {
    flex-direction: row;
    height: inherit;
  }
}

.nuclide-ui-panel-component-content {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/*
 * The style must be added because the browser-provided style targets `[hidden]`, which is less
 * specific than `.nuclide-ui-panel-component`.
 */
.nuclide-ui-panel-component[hidden] {
  display: none;
}

.nuclide-ui-panel-component-resize-handle {
  width: auto;
  height: auto;
  flex: 0 0 auto;

  &.left,
  &.right {
    width: 4px;
    cursor: col-resize;
  }

  &.top,
  &.bottom {
    height: 4px;
    cursor: row-resize;
  }
}

.nuclide-ui-panel-component-cursor-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;

  &.left,
  &.right {
    cursor: col-resize;
  }

  &.top,
  &.bottom {
    cursor: row-resize;
  }

}