@import 'mixins_and_variables_and_functions';

.compare-versions-container {
  min-width: 0;
}

.diff-files-holder {
  flex: 1;
  min-width: 0;
  z-index: 201;
}

.diff-tree-list {
  // This 11px value should match the additional value found in
  //      /assets/stylesheets/framework/diffs.scss
  // for the $mr-file-header-top SCSS variable within the
  //      .file-title,
  //      .file-title-flex-parent {
  // rule.
  // If they don't match, the file tree and the diff files stick
  // to the top at different heights, which is a bad-looking defect
  $diff-file-header-top: 11px;
  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + $diff-file-header-top;

  position: -webkit-sticky;
  position: sticky;
  top: $top-pos;
  max-height: calc(100vh - #{$top-pos});
  z-index: 202;

  .with-system-header & {
    top: $top-pos + $system-header-height;
  }

  .with-system-header.with-performance-bar & {
    top: $top-pos + $system-header-height + $performance-bar-height;
  }

  .with-performance-bar & {
    $performance-bar-top-pos: $performance-bar-height + $top-pos;
    top: $performance-bar-top-pos;
    max-height: calc(100vh - #{$performance-bar-top-pos});
  }

  .drag-handle {
    bottom: 16px;
    transform: translateX(10px);
  }
}

.tree-list-holder {
  height: 100%;

  .file-row {
    margin-left: 0;
    margin-right: 0;
  }
}

.tree-list-scroll {
  max-height: 100%;
  padding-bottom: $grid-size;
  overflow-y: scroll;
  overflow-x: auto;
}

.tree-list-search {
  flex: 0 0 34px;

  .form-control {
    padding-left: 30px;
  }
}

.tree-list-icon {
  top: 50%;
  left: 10px;
  transform: translateY(-50%);

  &,
  svg {
    fill: var(--gray-400, $gray-400);
  }
}

.tree-list-clear-icon {
  right: 10px;
  left: auto;
  line-height: 0;
}

@media (max-width: map-get($grid-breakpoints, md)-1) {
  .diffs .files {
    .diff-tree-list {
      position: relative;
      top: 0;
      // !important is required to override inline styles of resizable sidebar
      width: 100% !important;
    }

    .tree-list-holder {
      max-height: calc(50px + 50vh);
      padding-right: 0;
    }
  }
}