@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: -webkit-flex;
  -webkit-flex: 1;

  atom-pane-axis {
    display: -webkit-flex;
    -webkit-flex: 1;

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

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

    & > atom-pane-resize-handle {
      width: 100%;
      height: 8px;
      margin-top: -4px;
      cursor: ns-resize;
      border-bottom: none;
    }
  }

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

    & > atom-pane-resize-handle {
      width: 8px;
      height: 100%;
      margin-left: -4px;
      cursor: ew-resize;
      border-right: none;
    }
  }

  atom-pane {
    position: relative;
    display: -webkit-flex;
    -webkit-flex: 1;
    -webkit-flex-direction: column;
    overflow: visible;

    .item-views {
      -webkit-flex: 1;
      display: -webkit-flex;
      min-height: 0;
      min-width: 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;
      }
    }
  }
}