@import "ui-variables";

// Pane-items are things that go inside a pane. Like the UI-Demo, the
// settings-view, the archive-view, the image-view. Etc. Basically a non-
// editor resource with a tab.
atom-pane-container {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;

  atom-pane-axis {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;

    & > atom-pane-resize-handle {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        z-index: 3;
      }
    }
  }

  atom-pane-axis.vertical {
    flex-direction: column;

    & > atom-pane-resize-handle {
      border-bottom: none;
      &:before {
        height: 8px;
        top: -4px;
        left: 0;
        right: 0;
        cursor: row-resize;
      }
    }
  }

  atom-pane-axis.horizontal {
    flex-direction: row;

    & > atom-pane-resize-handle {
      border-right: none;
      &:before {
        width: 8px;
        left: -4px;
        top: 0;
        bottom: 0;
        cursor: col-resize;
      }
    }
  }

  atom-pane {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: visible;
    min-width: 0;
    min-height: 0;

    .item-views {
      flex: 1;
      display: flex;
      min-width: 0;
      min-height: 0;
      position: relative;

      .pane-item {
        color: @text-color;
        background-color: @pane-item-background-color;
      }

      > *, > atom-text-editor.react > * {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
}

// Windows doesn't have row- and col-resize cursors
.platform-win32 {
  atom-pane-container {
    atom-pane-axis.vertical {
      & > atom-pane-resize-handle {
        cursor: ns-resize;
      }
    }

    atom-pane-axis.horizontal {
      & > atom-pane-resize-handle {
        cursor: ew-resize;
      }
    }
  }
}