@import "ui-variables";
@import "syntax-variables";

.outline-view {
  border-left: 1px solid @tool-panel-border-color;

  order: 2;
  min-width: 175px;
  overflow-x: hidden;

  display: flex;
  position: relative;
  flex-direction: column;

  .title-container {
    border-bottom: 1px solid @tool-panel-border-color;
    margin: 6px;
    padding-bottom: 6px;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
  }

  .title-text {
    cursor: default;
    text-overflow: ellipsis;
    overflow-x: hidden;
    flex: 20;
    white-space: pre;
  }

  .outline-tree {
    flex: 20;
    padding: 0 6px 6px 6px;
    overflow-y: auto;
  }

  .outline-errors {
    margin: 6px;
    border-top: 1px solid @tool-panel-border-color;
    padding-top: 6px;
  }

  .errors-list {
    max-height: 82px;
    overflow-x: hidden;
    overflow-y: auto;

    .outline-error-item {
      cursor: pointer;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: flex;

      .item-info {
        color: @syntax-color-renamed;
        flex: 0 0 auto;
      }

      .item-warning {
        color: @syntax-color-modified;
        flex: 0 0 auto;
      }

      .item-error {
        color: @syntax-color-removed;
        flex: 0 0 auto;
      }

      .item-text {
        flex: 1 1 auto;
        overflow-x: inherit;
        text-overflow: inherit;
        padding-left: 8px;
      }

      .item-icon {
        flex: 0 0 auto;
      }
    }
  }

  ul,
  ol {
    padding-left: 12px;
  }

  ol,
  ul,
  li {
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
  }

  li {
    cursor: default;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }

  .list-item {
    white-space: nowrap;
  }

  .list-item.region {
    font-weight: bold;
    background-color: @background-color-selected;
  }

  .list-item:hover {
    background-color: @background-color-highlight;
  }

  .outline-deprecated {
    text-decoration: line-through;
  }

  .outline-static {
    font-style: italic;
  }

  .muted {
    color: @text-color-subtle;
  }

  a {
    cursor: pointer;
  }

  a:hover {
    text-decoration: underline;
  }
}
