// To be used for opaque elements overlaid atop the selected row
$treeview_selection_opaque: gtkmix($text_color, $base_color, 10%);
$treeview_borders_opaque: gtkmix($text_color, $base_color, if($contrast == 'high', 40%, 20%));

treeview.view {
  border-left-color: $treeview_borders_opaque; // this is actually the tree lines color,
  border-top-color: $treeview_borders_opaque; // while this is the grid lines color, better then nothing
}

columnview.view,
treeview.view {
  @include focus-ring();

  &:selected {
    &:focus, & {
      border-radius: 0;
    }
  }

  &.separator {
    min-height: 2px;
    color: $borders_color;
  }

  &:drop(active) {
    box-shadow: none;
  }

  > dndtarget:drop(active) {
    border-style: solid none;
    border-width: 1px;
    border-color: $drop_target_color;

    &.after { border-top-style: none; }

    &.before { border-bottom-style: none; }
  }

  &.expander {
    // GtkTreeView uses the larger of the expander’s min-width and min-height
    min-width: 16px;
    min-height: 16px;
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');

    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }

    color: gtkalpha($text_color, .7);

    &:hover { color: $text_color; }

    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }

    &:disabled { color: gtkalpha(currentColor, 0.5); }
  }

  &.progressbar { // progress bar in treeviews
    @if $variant == light { color: $base_color; }

    &, &:selected {
      background-color: $accent_bg_color;
      color: $accent_fg_color;
    }

    box-shadow: none;
  }

  &.trough { // progress bar trough in treeviews
    background-color: gtkalpha($fg_color, 0.1);
  }

  > header {
    > button {
      @extend %undecorated_button;
      padding: 0 6px;
      border: 1px solid gtkalpha($text_color, .15);
      border-width: 0 0 1px 1px;
      border-radius: 0;

      &:disabled {
        border-color: $bg_color;
      }

      &:last-child { border-right-width: 0; }

      color: gtkalpha($text_color, .4);
      font-weight: bold;
      box-shadow: none;

      &:hover {
        color: gtkalpha($text_color, .7);
        box-shadow: none;
      }

      &:active {
        color: $text_color;
      }
      sort-indicator {
        &.ascending {
          -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
        }
        &.descending {
          -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
        }

        min-height: 16px;
        min-width: 16px;
      }
    }
  }

  button.dnd,
  header.button.dnd { // for treeview-like derive widgets
    &:active, &:selected, &:hover, & {
      padding: 0 6px;
      color: $base_color;
      background-image: none;
      background-color: $accent_bg_color;
      border-style: none;
      border-radius: 0;
      box-shadow: inset 0 0 0 1px $base_color;
      transition: none;
    }
  }

  acceleditor > label {
    // see tests/testaccel in GTK to test
    background-color: $treeview_selection_opaque;
  }
}

/********************************************************
 * Data Tables                                          *
 * treeview like tables with individual focusable cells *
 * https://gitlab.gnome.org/GNOME/gtk/-/issues/2929     *
 ********************************************************/

columnview {
  // move padding to child cells
  > listview > row {
    padding: 0;

    // align horizontal sizing with header buttons
    > cell {
      padding: 8px 6px;

      &:not(:first-child) {
        border-left: 1px solid transparent;
      }
    }
  }

  // make column separators visible when :show-column-separators is true
  &.column-separators > listview > row > cell {
    border-left-color: $borders_color;
  }

  // shrink vertically for .data-table
  &.data-table > listview > row > cell {
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

columnview row:not(:selected) cell editablelabel:not(.editing):focus-within {
  outline: 2px solid $focus_border_color;
}

columnview row:not(:selected) cell editablelabel.editing:focus-within {
  outline: 2px solid $accent_bg_color;
}

treeexpander {
  border-spacing: 4px;
}
