@use '../colors';

// TODO: check if full width horizontal separators are possible

treeview {
  -GtkTreeView-expander-size: 13;
  -GtkTreeView-grid-line-pattern: '';
  -GtkTreeView-tree-line-pattern: '';
  -GtkTreeView-horizontal-separator: 8;
  -GtkTreeView-vertical-separator: 8;

  background: colors.$surface-2;

  border-left-color: colors.$highlight; // TODO: check if there is going to be a new way to define tree-lines
  border-top-color: colors.$highlight; // TODO: check if there is going to be a new way to define column-lines

  &:hover {
    background: colors.$highlight;
  }

  &:selected {
    background: colors.$accent-7;
    // TODO: introduce contrast foreground color (light)
    color: lighten(colors.$accent-7, 50%);
  }

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

  header {
    button {
      border-bottom: 1px solid colors.$highlight;
      background: colors.$surface-3;

      &:hover {
        background: colors.$highlight;
      }

      &:not(:last-child) {
        border-right: 1px solid colors.$surface-3;
      }
    }
  }
}