dotfiles/themes/Dracula/gtk-4.0/widgets/_treeviews.scss

$_treeview_borders_color: $borders_color;
$_treeview_backdrop_borders_color: if($variant=='light',mix($backdrop_borders_color, $base_color, 80%),mix($backdrop_fg_color, $base_color, 20%));
columnview.view,
treeview.view {
  border-left-color:  $_treeview_borders_color; // this is actually the tree lines color,
  border-top-color: $_treeview_borders_color;                         // while this is the grid lines color, better then nothing

  //@include focus-ring();

  > rubberband { @extend rubberband; } // to avoid borders being overridden by the previously set props

  &:selected {
    &:focus, & {
      border-radius: 0;
      outline-color: $red;

      @extend %selected_items;
    }
  }

  &:disabled {
    color: $insensitive_fg_color;

    &:selected {
      color: mix($selected_fg_color, $selected_bg_color, 40%);
      &:backdrop { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
    }
  }

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

  &:backdrop {
    border-left-color: $_treeview_backdrop_borders_color;
    border-top: $_treeview_backdrop_borders_color;
  }

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

  > dndtarget:drop(active) {
    border-style: solid none;
    border-width: 1px;
    border-color: $selected_borders_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: mix($text_color, $base_color, 70%);

    &:hover { color: $text_color; }

    &:selected {
      color: mix($selected_fg_color, $selected_bg_color, 70%);

      &:hover { color: $selected_fg_color; }
    }

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

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

    border: 1px solid $selected_borders_color;
    border-radius: 4px;
    background-color: $selected_bg_color;
    background-image: linear-gradient(to bottom,
                                      $selected_bg_color,
                                      darken($selected_bg_color,10%));
    box-shadow: inset 0 1px if($variant=='light', transparentize(white,0.7),
                                                  transparentize(white,0.85)),
                      0 1px if($variant=='light', transparentize(black, 0.8),
                                                  transparentize(black,0.9));

    &:selected {
      &:focus, & {

        @if $variant == 'light' {
          color: $selected_bg_color;

        }

        @else { box-shadow: inset 0 1px transparentize(white, 0.95); }

        background-image: image($base_color);

        &:backdrop {
          @if $variant == 'light' {
            color: $selected_bg_color;
          }
          background-color: $backdrop_base_color;
        }
      }
    }
  }

  &.trough { // progress bar trough in treeviews
    background-color: transparentize($fg_color,0.9);

    &:selected {
      &:focus, & {
        background-color: if($variant == 'light',
                             transparentize($selected_fg_color, 0.7),
                             darken($selected_bg_color, 10%));

      }
    }
  }

  > header {
    > button {
      $_column_header_color: mix(lighten($fg_color, 20%), lighten($base_color, 40%), 50%);

      @extend %column_header_button;

      color: $_column_header_color;
      background-color: $base_color;
      font-weight: bold;
      text-shadow: none;
      box-shadow: none;

      &:hover {
        @extend %column_header_button;

        color: mix($_column_header_color, $fg_color, 50%);
        box-shadow: none;
        transition: none; //I shouldn't need this
      }

      &:active {
        @extend %column_header_button;

        color: $fg_color;
        transition: none; //I shouldn't need this
      }

      &:backdrop { box-shadow: none; }
      
      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: $red;
      background-image: none;
      background-color: $selected_bg_color;
      border-style: none;
      border-radius: 0;
      box-shadow: inset 0 0 0 1px $base_color;
      text-shadow: none;
      transition: none;
    }
  }

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


%column_header_button {
  padding: 0 6px;
  background-image: none;
  border-style: none none solid solid;
  border-width: 1px;
  border-color: $_treeview_borders_color;
  border-radius: 0;
  text-shadow: none;
  box-shadow: none;

  &:disabled {
    border-color: $bg_color;
    background-image: none;
  }

  &:last-child { &:backdrop, & { border-right-style: none; }}
}