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

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

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

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

    .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;
      }
    }
  }
}